Ejemplo básico de como ocultar y mostrar elementos con jQuery utilizado slideDown y slideUp. Para entender mejor las funciones que utilizamos, puedes consultar la documentación oficial de jQuery donde encontrarás ejemplos y referencias completas.
¿Cómo es el archivo HTML?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll hacia un elemento html</title>
<link rel="stylesheet" href="css/styles.css" />
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div class="content">
<h1>SlideUp y SlideDown con jQuery</h1>
<p>Al hacer clic en el botón ocultar, el contenido se ocultará con un efecto slide hacia arriba. Al hacer clic en el botón Mostrar, el contenido se mostrará con un efecto slide hacia abajo.</p>
<button class="btnOcultar">Ocultar</button>
<button class="btnMostrar">Mostrar</button>
<div class="destino">
<br>
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor.</p>
</div>
</div>
</body>
</html>
¿Cómo es el archivo jQuery?
// JavaScript Document
$(document).ready(function() {
$(".btnOcultar").click(function () {
$('.destino').slideUp();
});
$(".btnMostrar").click(function () {
$('.destino').slideDown();
});
});
¿Cómo es el archivo CSS?
@charset "utf-8";
/* CSS Document */
body{
background:#81d742;
}
.content{
width:1000px;
margin-top:50px;
min-height:600px;
background:#fff;
margin:0 auto;
padding:20px;
}
.destino {
padding:20px;
background:#eee;
border-radius:4px;
margin: 20px;
font-size: 20px;
}
Descargar Ocultar y mostrar elementos con jQuery
Ocultar y mostrar con jQuery
- slideUp() oculta elementos con efecto de deslizamiento hacia arriba
- slideDown() muestra elementos con efecto de deslizamiento hacia abajo
- Los eventos click en botones disparan las funciones de animación
- document.ready() asegura que el DOM esté listo antes de ejecutar scripts
- Los selectores de clase permiten dirigirse a elementos específicos del HTML
4 respuestas
Seria muy complicado que el texto apareciera oculto y luego se desplegara si el usuario lo pulsa.
Leer más, leer menos
Un saludo y gracias de antemano
Jesus
En ese caso sería algo así:
$(«.btnOcultar»).click(function () {
$(‘.destino’).slideUp();
$(«.btnMostrar»).show();
$(«.btnOcultar»).hide();
});
$(«.btnMostrar»).click(function () {
$(‘.destino’).slideDown();
$(«.btnMostrar»).hide();
$(«.btnOcultar»).show();
});
$(«.btnOcultar»).hide();
$(‘.destino’).hide();
Muchas gracias por tu pronta respuesta.
Lo he probado y funciona.
Pero no soy capaz de ponerlo en categorías descripción Prestashop que era para lo que lo quería.
Gracias
Ya he logrado ponerlo en Prestashop, y funciona perfectamente.
Muchas gracias.
Te debo una.
Saludos Jesús Vazquez