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?
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>
$(".example")
por $(document)
o el div
contenedor de tu html y agregando el código de mostrar/ocultar
Commented
el 23 ene. 2019 a las 14:16
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();
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>
¡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>