Código de JavaScript - Mostrar/Ocultar div en scroll

Imágen de perfil

Mostrar/Ocultar div en scrollgráfica de visualizaciones


JavaScript

Actualizado el 11 de Julio del 2020 por Administrador (698 códigos) (Publicado el 2 de Junio del 2009)
23.677 visualizaciones desde el 2 de Junio del 2009
Código que muestra como mostrar y ocultar un div en modo scroll.

Versión 1 - HTML4 sin transition
estrellaestrellaestrellaestrellaestrella(3)

Actualizado el 11 de Julio del 2020 (Publicado el 2 de Junio del 2009)gráfica de visualizaciones de la versión: Versión 1 - HTML4 sin transition
22.014 visualizaciones desde el 2 de Junio del 2009

Versión 2 - Con transition
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 11 de Julio del 2020gráfica de visualizaciones de la versión: Versión 2 - Con transition
1.664 visualizaciones desde el 11 de Julio del 2020
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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>



Comentarios sobre la versión: Versión 2 - Con transition (1)

Imágen de perfil
12 de Julio del 2020
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 2 - Con transition

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s1803