Ejemplo básico de como ocultar y mostrar elementos con jQuery utilizado slideDown y slideUp.
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>
ARCHIVO JQUERY
// JavaScript Document
$(document).ready(function() {
$(".btnOcultar").click(function () {
$('.destino').slideUp();
});
$(".btnMostrar").click(function () {
$('.destino').slideDown();
});
});
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;
}
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