3

quiero ocultar un div usando un boton, y a la misma vez que vuelva aparecer al volver a hacer click en el.

<div id='ocultar-y-mostrar'>CONTENIDO</div>

<button id='ocultar-mostrar'><i class="fas fa-bars"></i></button>

¿Cómo lo hago?

4 respuestas 4

10

De W3School:

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
<button onclick="myFunction()">Clickeame</button>

<div id="myDIV" style="border:1px solid black;">
  Este elemento aparece y desaparece con el botón
</div>

2
  • Sabes cómo hago para que el div también desaparezca haciendo click en cualquier parte de la página?
    – code2018
    Commented el 23 ene. 2019 a las 4:32
  • ¿como un tipo modal? Si usas jquery puedes basarte en esta respuesta de SOen stackoverflow.com/questions/2457246/… cambiando el $(".example") por $(document) o el div contenedor de tu html y agregando el código de mostrar/ocultar
    – Killbunny
    Commented el 23 ene. 2019 a las 14:16
5

Hola que tal buscando en la web encontre como hacerlos con js:

document.getElementById("ID_DEL_ELEMENTO").style.display = "none";

Con JQuery puedes hacerlo de esta forma:

$("#ID_DEL_ELEMENTO").hide();
1
  • 1
    si lo encontraste en la web, conviene que añadas como créditos al autor la página de donde lo sacaste
    – user75901
    Commented el 7 dic. 2018 a las 0:12
2

Tambien puedes usar la propiedad de css visibility y camiarlo con javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id='ocultar-y-mostrar'>CONTENIDO</div>

    <button id='ocultar-mostrar'><i class="fas fa-bars"></i>ocultar/mostrar</button>

    <script>
        window.addEventListener('load', init, false);
        function init() {
            let div = document.querySelector('#ocultar-y-mostrar');
            div.style.visibility = 'visible';
            let boton = document.querySelector('#ocultar-mostrar');
            boton.addEventListener('click', function (e) {
                if(div.style.visibility === 'visible'){
                    div.style.visibility = 'hidden';
                }else{
                    div.style.visibility = 'visible';
                }
            }, false);
        }
    </script>
</body>
</html>

0

¡Buenas! Yo lo necesitaba simplemente para mostrar más texto y lo resolví así:

Contenido visible. <div id='leer_mas'><a href='#' onclick='document.getElementById("contenido").style.display = "block"; document.getElementById("leer_mas").style.display = "none";'>Leer más</a></div>
<div id='contenido' style="display: none;">
Contenido oculto
</div>
2
  • Contenido visible. <div id='leer_mas'><a href='#' onclick='document.getElementById("contenido").style.display = "block"; document.getElementById("leer_mas").style.display = "none";'>Leer más</a></div> <div id='contenido' style="display: none;"> Contenido oculto </div>
    – user336619
    Commented el 16 ago. 2023 a las 15:35
  • Pulsa en editar y agrega triples acentos graves (```) una línea antes y una después de tu código, para darle formato. Luego, no olvides borrar tu comentario. Haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 16 ago. 2023 a las 15:40

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.