Dacă este necesară afişarea opţională a textului se poate folosi un checkbox şi puţin CSS, după cum se vede mai jos:
#spoiler_box {
background-color: transparent;
padding: auto;
display:none;
margin-top: 10px;
}
#spoiler_check:checked ~ #spoiler_box {
display:block!important;
}
.spoiler_check_text:before {
content:"Click pe casetă pentru a afişa conţinutul.";
font-weight:400;
font-style: italic;
padding:0 5px;
}
#spoiler_check:checked ~ .spoiler_check_text:before {
content:"Click pe casetă pentru a ascunde conţinutul";
font-weight:900;
font-style: normal;
}
Important este, după cum se vede scriptul următor, să fie folosit tag-ul form, astfel încât acţionarea checkbox-ului să aibă efect.
<form>
<input type="checkbox" name="spoiler" id="spoiler_check"><span class="spoiler_check_text">.</span>
<div id="spoiler_box">
Proba pentru checkbox
</div>
<hr>
<p>Alt text</p>
</form>
Se poate remarca folosirea opţiunii content pentru a alterna textul care îndeamnă la acţionarea checkbox-ului.
O altă remarcă: se observă că, după tag-ul input este utilizat un span, care are între ele un punct. Acesta poate fi util atunci când anumite framework-uri, după cum este şi WordPress-ul are anumite reguli şi proceduri de editarea care pot face ca, dacă nu găsesc nimic între tag-uri, să le şteargă.
