If you must display optional text boxes you can use a little CSS, as shown below:
#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;
}
It is important, as it is seen in the following script, to use the form tag so that the operation of the checkbox has an effect.
<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>
It may noted the using of the content option to alternate the text that prompts you to operate the checkbox.
Another remark: it is noticed that after the input tag a span is used, which has a point between them. This can be useful when certain frameworks, such as WordPress, have certain editing rules and procedures that can cause them to be deleted if they can’t find anything between the tags.
