sábado, 13 de mayo de 2023

JS - Mostrar y ocultar div con un botón

 Muestra el contenido del "Div" con un solo botón en Javascript..



Así de sencillo fue el código.


HTML
<button onclick="myFunction()">Ver</button>
<div id="myDIV">
  <img src="https://humanidades.com/wp-content/uploads/
2016/07/buho-1-e1560041723608-800x400.jpg" alt="">
</div> CSS DEPENDE COMO QUIERAS AJUSTAR EL BOTON


JS
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}


OPCION NUMERO 2

HTML5
<button class="btn_ab" onclick="openReal('primero')">TV-Online</button>
<div id='primero' class='real'>
    (contenido)
</div>


CSS
.real {
    width: 100%;
    height: auto;
    display: none;
}
.hidden {
    display: block !important;
}
.btn_ab{
    margin: 30px;
}


JAVASCRIPT

// Abrir y cerrar divs
function openReal(realName) {
    document.getElementById(realName).classList.toggle('hidden')
  }








No hay comentarios:

Publicar un comentario

Documental de Hackers