I'm trying to make a checkbox which, when clicked, shows (make visible) a text, and when unclicked hides a text, but the JavaScript doesn't work and I don't know if I'm correct or not. The HTML code is (div with id="acepto" is the one that should be hidden and shown):
<div class="required checkbox">
<div class="checker" id="uniform-customer_privacy">
<input type="checkbox" value="0" id="casilla" required name="customer_privacy" autocomplete="off" onclick="mostrar()">
<label for="newsletter-input"><a href="https://portugaletearkunautak.blogspot.com/p/proteccion-de-datos.html">Acepto política de Privacidad y Protección de Datos</a></label>
</div>
</div>
</span></p><p><br/></p>
<div id="texto">
<p><span style="font-size: large;">Poniéndote en contacto con nosotros aceptas la política de privacidad y protección de datos.</span></p>
</div>
I've inserted this piece of script in the <HEAD>
of the theme (Theme > Edit HTML), but it doesn't work:
<script type='text/javascript'>
//<![CDATA[function mostrar(){
var checkBox = document.getElementById("casilla");
var text = document.getElementById("texto");
if (checkBox.checked){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
//]]>
</script>
I really appreciate your help, thanks in advance.
You may not add // (double slash) in your code cause that will make comment text after it. a sample is given here and my case it worked.
function mostrar() {
var checkBox = document.getElementById("casilla");
var text = document.getElementById("texto");
if (checkBox.checked) {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
<div class="required checkbox">
<div class="checker" id="uniform-customer_privacy">
<input type="checkbox" value="0" id="casilla" required name="customer_privacy" autocomplete="off"
onchange="mostrar()">
<label for="newsletter-input"><a
href="https://portugaletearkunautak.blogspot.com/p/proteccion-de-datos.html">Acepto política de
Privacidad y Protección de Datos</a></label>
</div>
</div>
<div id="texto" style="display: none;">
<p><span style="font-size: large;">Poniéndote en contacto con nosotros aceptas la política de privacidad y
protección de datos.</span></p>
</div>