Ocultar y mostrar elementos con jQuery

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

Deja un comentario

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