Para implementar esto necesitarmos crear una función javascript dentro de la etiqueta <head> de la siguiente forma:
<script type="text/javascript">
function showContent() {
element = document.getElementById("content");
check = document.getElementById("check");
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
Con esta función lo que conseguimos es obtener el elemnto con id=»content», que se trata del contenido escondido y seguidamente comprobar si el input checkbox con id=»check» está chekeado o no para mostrar o no el div con id=»content».
<b>Mostrar contenido?</b> <input type="checkbox" name="check" id="check" value="1" onchange="javascript:showContent()" />
El código anterior estaría dentro del formulario y se trata del checkbox que mostrará o no según esté chekeado o no el div escondido.
Y finalmente, tendremos a continuación el div escondido que será mostrado al checkear el checkbox.
<div id="content" style="display: none;"> contenido del div escondido<br/> contenido del div escondido<br/> contenido del div escondido<br/> </div>
No hay comentarios:
Publicar un comentario