Mostrar y ocultar el contenido de un div con un checkbox
Siempre que tengamos contenido no muy importante o que no queramos resaltar en nuestra página Web o especialmente en los formularios, cuando nos referimos a campos no obligatorios, podriamos ocultarlos y mostrarlos al antojo del usuario medante un checkbox que muestre o no muestre el contenido según esté chekeado o no.
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>
Autor
¿Buscas trabajo de programador?
35 respuestas a “Mostrar y ocultar el contenido de un div con un checkbox”
Deja una respuesta
85 artículos que te podrían interesar
Ver más sobre
realize algo asi y si me despliega las tres opciones cronica, medicamentos y alimentos en tres diferentes filas pero cuando desmarco la opcion no desaparecen alguna idea de como solicionarlo
function showContent() {
element1 = document.getElementById(«cronica»);
element2 = document.getElementById(«medicamentos»);
element3 = document.getElementById(«alimentos»);
check = document.getElementById(«check_cronica»);
check = document.getElementById(«check_medicamentos»);
check = document.getElementById(«check_alimentos»);
if (check_cronica.checked) {
element1.style.display=’block’;
}
if (check_medicamentos.checked) {
element2.style.display=’block’;
}
if (check_alimentos.checked) {
element3.style.display=’block’;
}
else {
element.style.display=’none’;
}
}
Dejamos tus dudas abiertas al público por si alguien tiene una respuesta rápida
buen dia tengo una duda en el siguiente codigo cuando selecciono contenido 1 o contenido 2 siempre ocupan el musmo lugar hay alguna manera que si quiero seleccionar las dos opciones el contenido 1 y contenido 2 se visualizen en diferente lugares
function showContent() {
element1 = document.getElementById(«content1»);
element2 = document.getElementById(«content2»);
check = document.getElementById(«check»);
if (check.checked) {
element1.style.display=’none’;
element2.style.display=’block’;
}
else {
element1.style.display=’block’;
element2.style.display=’none’;
}
}
Mostrar contenido?
primero
segundo
Excelente,
Me fue de mucha ayuda
Hola,
Y para montar esto en un formulario de WordPress con Contact Form 7??
Gracias.
Hola,
En este caso tendrás que investigar como está desarrollado Contact Form 7 para ver si puedes aplicar esto en su formulario.
Saludos
Utilize el codigo para un radiobuttom sirve excelente!!! pero ahora como hare para ocultar el mismo div al momento de dar la opcion «NO». ejemplo tengo un formulario que realiza una pregunta con opciones SI y NO al momento de seleccionar SI despliega el div oculto (el cual aplique el codigo), pero al seleccionar NO quisiera volver a ocultar el div
Hola,
Quizás te pueda resultar interesante el siguiente tutorial:
https://www.jose-aguilar.com/blog/display-content-javascript/
Saludos
Tendrás una versión similar pero usando radiobuttom
Muchas gracias, ha sido de mucha utilidad.
hola!
Gracias por el aporte solo lo modifique para poder usarla mas de 2 veces agregando un «1» al nombre de la función y en la siguiente le puse «2» asi sucesivamente.
Hola Estoy tratando de hacer esto mismo pero con radio cuando carga normal activo el radio y me muestra la div pero cuando hago clic en otro radio la div no se oculta, alguien me podria ayudar con este tema
Hola,
Todo apunta a que te falta programar la parte de ocultar el div cuando se checkea el otro radio. Quizá si pudiéramos ver el código podríamos darte una respuesta más precisa.
Saludos
muchas gracias por el aporte la verdad 😀
estaba buscanso como hacerlo ahora por medio de un clic XD soy nuevo
Gracias.
Simple y funcional… excelente!
Me sirvió para machetear un plugin de mostrado de formulario cuando se refiere a los términos de referencia que acepta el usuario antes de llenar un formulario, se visualice este o lo oculte.
Gracias amigo!
Gracias por el codigo, nos viene genial para un formulario que estamos creando. Lo que si, al enviar el formulario y volver a ingresar en el, la información vuelve a estar oculta, esto como se podria solucionar?
Amigo–saludos amigo.. me funciono tu codigo gracias
Hola jose. Tengo una duda. Ese código es para mostrar un formulario pero que pasa si quiero mostrar 3 formularios distintos, cada uno contenido en su respectivo div? Porque con ese código al presionar el checkbox me abre los 3 formularios al mismo tiempo. Mi idea es que mi sistema tenga 3 checkbox y que al presionar sobre alguno se abra el formulario correspondiente. Espero poder haberme explicado. Desde ya muchas gracias
Hola, cambiando un poco el código puedes conseguir el efecto que deseas. Saludos
Hola jose. Eh probado muchos cambios y sigo sin conseguir el efecto deseado. Tengo 3 checked pero no hay manera de que cada uno abra su correspondiente formulario. Solamente me abre el formulario del primer checked. Si tienes alguna idea mas específica de lo que pueda hacer te agradeceria
Hola cómo haria para que se muestre un grupo de información al seleccionar un checkbox y otra información al seleccionar el otro checkbox, pero que se muestre sólo una información a la vez, al cambiar de checkbox se cambie la información
Hola, como sería la función si en lugar de «getElementById» se usa «getElementByClassName»
Lograste Solucionarlo? yo también necesito en lugar de “getElementById” usar “getElementByClassName” pero no lo toma…. alguna guía??
gracias estimado, me sirvió mucho, le hice unos cambios para adaptarlo a lo que necesitaba:
function showContent() {
element1 = document.getElementById("content1");
element2 = document.getElementById("content2");
check = document.getElementById("check");
if (check.checked) {
element1.style.display='none';
element2.style.display='block';
}
else {
element1.style.display='block';
element2.style.display='none';
}
}
Mostrar contenido?
primero
segundo
gracias estimado, me sirvió mucho, le hice unos cambios para adaptarlo a lo que necesitaba:
function showContent() {
element1 = document.getElementById(«content1»);
element2 = document.getElementById(«content2»);
check = document.getElementById(«check»);
if (check.checked) {
element1.style.display=’none’;
element2.style.display=’block’;
}
else {
element1.style.display=’block’;
element2.style.display=’none’;
}
}
Mostrar contenido?
primero
segundo
Excelente aporte!
el ejemplo que necesito claro y conciso, siempre a gradecido a vosotros que practicais el enseñar de esta forma, vosotros si revolucionas el mundo
Gracias
gracias justo lo que buscaba muy buen aporte aver si me ayudas yo quiero para muchos selects con el mismo id
Yo tuve un ligero inconveniente con el «onchange» como utilizo forsozamente IE no hacia el chequeo hasta que daba clic en otra cosa asi que lo cambié por el «onclick» y problema resuelto si a alguien le pasa lo mismo aqui les dejo este pequeño dato… Saludos. [JSD]
Perfecto, simple de implementar y funciona bien
Gracias, lo solucione de esta manera:
Agregue checked al input y en el div cambie el (style=»display: none;») por (style=»display: block;»)
Es la función que buscaba, solo que me interesa que los checkbox estén seleccionados desde el principio y se oculte cuando se desmarque.
Alguien que me pudiera ayudar con esto, se lo agradecería mucho.
creo que simplemente tienes que añadir el atributo checked=»checked» al input type=»checkbox»
Gracias, lo solucione de esta manera:
Agregue checked al input, asi:
y cambi el style, asi:
Estimado, un gran aporte. Muchas gracias.