Ocultar y mostrar elementos con jQuery

jquery slideup slidedown
Ocultar y mostrar elementos con jQuery
Aprendiendo a ocultar y mostrar elementos con jQuery con efecto de animación al hacer clic en un botón.

Contenido

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

5 comentarios en «Ocultar y mostrar elementos con jQuery»

    • 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();

      Responder

Deja un comentario

Filtra por categoría:

¿Necesitas una web? Contacta con nosotros.

Relacionados: