Mostrar y ocultar contenido con javascript
Una de las cosas que más nos interesan a los webmasters es realizar un sitio con contenido dinamico y que por sobre todo sea completamente atractivo para el usuario. En muchos casos hay información que no deseamos mostrar salvo que el usuario quiera verla (como comentarios), y debemos ocultar dicho div, y tan solo mostrarlo cuando él usuario desea.
En este artículo vamos utilizar Javascript y CSS para lograr este proposito.
Para mostrar y ocultar un div debemos instanciar un div con un ID único y en el estilo incluir style=»display:none;» por ejemplo:
<div id="flotante" style="display:none;">CONTENIDO A OCULTAR/MOSTRAR</div>
En nuestro <head> debemos añadir dos funciones en javascript para mostrar y ocultar dicho div respectivamente.
<script languague="javascript">
function mostrar() {
div = document.getElementById('flotante');
div.style.display = '';
}
function cerrar() {
div = document.getElementById('flotante');
div.style.display = 'none';
}
</script>
Una vez hecho esto, tenemos las funciones en javascript que mostrarán y ocultarán el div cuando el usuario haga click en una imagen o un texto con el link a la función, como en el siguiente ejemplo:
<p><a href="javascript:mostrar();">Mostrar</a></p> <div id="flotante" style="display:none;"> <div id="close"><a href="javascript:cerrar();">cerrar</a></div> Este es un div ocultar </div>
Autor
¿Buscas trabajo de programador?
36 respuestas a “Mostrar y ocultar contenido con javascript”
Deja una respuesta
73 artículos que te podrían interesar
Ver más sobre
Hola, saludos. Gracias por aportar tu conocimiento.
Quiero preguntarte:
¿Cómo puedo hacer, por ejemplo en este blog de comentarios y respuestas, que se muestren más o menos comentarios?
Gracias por tu atención.
Hola,
El recurso de paginación puede ser una buena solución para lo que comentas.
Saludos
buen dia use algo asi en un menu desplegable y me funciono pero como hago que funcionen en un chexbox espero puedan ayudarme
en un asassasasasasasasas
function mostrar_estado(id) {
if (id == «activo») {
$(«#activo»).show();
$(«#inactivo»).hide();
}
if (id == «inactivo») {
$(«#inactivo»).show();
$(«#activo»).hide();
}
}
Hola, una consulta, se puede hacer que por ejemplo, al tener una botonera de 4 cajas, al apretar la primera se abra su respectiva caja, al apretar la segunda se cierre la primera y se abra la segunda, y asi sucesivamente? Gracias
Hola,
Si, sería posible, solo tienes que agregar un poco más de código para conseguirlo.
Saludos
Hola!! Muy útil la info, muchas gracias!
Una consulta, me gustaría que el contenido aparezca y desaparezca apretando el mismo botón ya que no puedo agregar el «cerrar», es posible hacer eso?
Hola,
Si usas jQuery puedes usar la función slideToggle
En JavaScript tendrás que comprobar si el botón ha sido pulsado para cerrarlo y viceversa.
Saludos
Excelente, a pesar de ser un post viejo es algo muy útil. Recomiendo usarlo con un parámetro en la función para reutilizarlo y declarar la variable con var
quedaría de este modo:
function mostrar(flotante) {
var div = document.getElementById(flotante);
div.style.display = »;
}
function cerrar(flotante) {
var div = document.getElementById(flotante);
div.style.display = ‘none’;
}
luego solo le pasan el nombre del id entre comillas simples ‘div1’ por ejemplo.
y para que sea responsive ?
Hola,
Para que sea responsive puedes emplear algunas de las técnicas para adaptar a todos los dispositivos.
Puedes usar Bootstrap:
https://www.jose-aguilar.com/blog/bootstrap-4/
o media queries:
https://www.jose-aguilar.com/blog/diseno-web-adaptable-flexible/
Saludos
quiero al hacer clic en vivienda mostrar/ocultar esta parte del folmulario y no puedo ayuda x favor gracias
Mostrar
CONTENIDO A OCULTAR/MOSTRAR
Habitaciones existentes
Sala
Comedor
Cocina
Baño
Dormitorios
todo bien cuando le doy click en mostrar se ve el contenido, lo que ahora deseo es que poner vario mostrar y cuando cliquee en uno se abra y si clico en otro automaticamente se cieere el anterior y se habra al que le di click para mostrar … no c si me deje entender?
Intenta poner identificadores diferentes para cada uno.
Hola buen día, está padre tu ejemplo, pero entonces una duda, cómo podría ocultar un mapa de Google y visualizarlo con un botón usando jQuery?
El mapa se asigna a un
Hola buenas tardes,
Lo puedes hacer de la misma forma tal como se explica en este tutorial. El mapa lo debes meter dentro de un div o container que es el que ocultarás o no.
Saludos
Buenas noches estoy intentando utilizar este código, y la función mostrar funciona perfectamente, pero después no funciona la de cerrar, encuentras alguna explicación.
Gracias
Hola,
En el ejemplo en funcionamiento funciona correctamente. Si necesitas ayudas quizás si vemos tu página en funcionamiento podemos observar que sucede.
Jose Aguilar,
Saludos
gracias
Buenas Jose, tengo mas o menos el mismo código que tienes tu aquí explicado para oculta una div y mostrar otra. Solo tengo un problema, y es que me gustaría que la selección que se haga se mantenga también cuando se actualice la pagina. Como puedo hacer eso?
Hola buenos días,
Yo creo que posible es. Creo que debes jugar con los id de los contenedores y añadirlos a la url. Por ejemplo:
http://yourweb.com#flotante
e ingeniartelas para que cuadno esté eso en la url se mantenga el div abierto.
Saludos
hola buenas noches tengo la siguiente consulta, realize el codigo para mostrar y coultar el div, en este div tengo un formulario a la derecha oculta, pero necesito es que me muestre el formulario sin tener que mover la pagina hacia la derecha para ver el formulario, gracias
Hola buenas tardes,
Nos podrías facilitar un enlace para ver visualmente el problema?
Saludos
Hola ,
estoy trabajando en un proyecto donde estoy haciendo un mapa con el API de google maps, y quiero agregar un filtro de las placas tectonicas, este filtro esta en un archivo KMZ, ya he podido agregarlo, pero el problema es que yo quiero que el filtro no aperesca hasta que el usuario de click en un botón, algo haci que active ese filtro.
me podrian explicar como hacer esto.
Hola necesito si me puedes ayudar
Necesito de una consulta base datos de una tabla X con un atributo estado
que me valla mostrando div que contiende un formulario de ingreso de datos.
ejemplo estado=1 que me aparezca el div para el estado 1
estado=2 que me aparezca el div para el estado 2
Al carga la pagina automaticamente.
Hola buenas tardes,
Si te parece bien envíanos todos los detalles a blog@jose-aguilar.com para ver como podemos proceder para facilitarte una solución.
Saludos
Hola!!!
Muchas gracias por toda la info.
Necesitaría saber esto mismo, pero al apretar el botón, aparecieran varias imágenes que tengo ocultas en diferentes área de la página, en vez de una.
He conseguido esto mismo, pues al apretar una imagen se muestra o se oculta otra imagenoculta en diferente área de la página, pero no consigo que se muestren, por ejemplo, tres imagenes ocultas en diferentes áreas entre si de la página.
Solo se me ha atsscado esto.
Muchas gracias.
Espero vuestra respuesta.
Saludos!!!
Hola,
Necesitaríamos ver tu página para ver el código y darte una recomendación.
Saludos
Estoy utilizando este código en una web para expandir el texto explicativo de diferentes bases de datos. Pero solo consigo que funcione una vez, en todos los caso me expande el mismo texto. No se que es lo que tengo que modificar para que cada base de datos muestre el texto correpondiente
Cuando tienes varios elementos debes jugar con un identificador distinto para cada uno de los contenedores.
Hola! quiero utilizarlo para varios items, cambio los identificadores de los distintos div, pero siempre abre y cierra el mismo. Cómo debería de duplicarse el javascript?
Hola, si necesitas tener distintos bloques ya no puedes usar esta función en el javascript -> getElementById(). Debes intentar trabajar con clases. Creo que puedes usar esta función getElementsByClass(). Saludos
Hola quisiera saber como instanciar una cantidad de div dependiendo del numero que le asigne en un text y mostrar esa cantidad..
Necesito ayuda en eso por favor.
Hola buenas tardes,
como solución rápida se me ocurre que en el jquery, en el evento del botón se recoja el valor del campoo de texto donde metes la cantidad y luego iterar haste ese número ya sea con un for o while y utilizar append() para ir añadiendo divs. Algo asi;
var quantity = $(‘#quantity’).val();
for (i = 0; i < quantity; i++) { $('#your_content').append('Contenido html'); } Saludos
Muchas gracias =),ya casi me queda,saludos.
Hola,ya implemente tu codigo y va muy bien, solo que tengo el contenido que quiero mostrar en otra hoja, como puedo mostrarla en la div oculta sin necesidad de pasar el codigo a la div, es decir existe alguna forma de mandarla llamar ahi mismo? no se si me de a entender, espero puedas ayudarme con eso, de ante mano gracias =)
Lo podrás mostrar siempre y cuando el contenido de esa hoja que quieres ocultar sea contenido html y sea un archivo php incluyendolo dentro del div oculto con require(‘archivo.php’);
espero que te sirva.
Saludos