<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mostrar/Ocultar div en scroll</title>
<style>
#iddiv { overflow:hidden;
transition: max-height 1s;
max-height:0px;
}
#iddiv>div { padding:5px 5px 10px 5px;
}
</style>
</head>
<body>
<h1>Mostrar/Ocultar div en scroll</h1>
<p>
<div><a href="#" onclick="mostrarOcultar('iddiv')">Click para Mostrar/Esconder Div</a></div> <div id="iddiv" class="hidden">
<div>
hola
<br />hola2
<br />hola3
<br />hola4
</div>
</div>
<div>Texto a continucación del div...</div>
</p>
</body>
</html>
<script>
function mostrarOcultar(iddiv)
{ const div=document.getElementById(iddiv);
div.style.maxHeight = div.style.maxHeight=="0px" || div.style.maxHeight=="" ? div.querySelector("div").offsetHeight+"px" : "0px";}
</script>
Crear cuenta
Comentarios sobre la versión: Versión 2 - Con transition (1)