Ocultar y mostrar elementos con jQuery

Tabla de contenidos

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;
}

 

Descargar Ocultar y mostrar elementos con jQuery

Picture of Jose Hilario
Jose Hilario
¡Apasionado del diseño web! Especializado en WordPress, WooCommerce y Elementor PRO. Me encanta diseñar páginas web atractivas y optimizadas para SEO. Mi objetivo: impulsar a las empresas con un diseño web atractivo y funcional.

4 comentarios

  1. 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

    1. 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();

  2. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

¿Necesitas una web? Contacta con nosotros.

Relacionados: