Ocultar y mostrar elementos con jQuery

//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 Comments

  1. Jesus julio 22, 2014 at 6:14 pm - Reply

    Gran explicación y muy buen trabajo.

    Ejemplo práctico aplicado a Prestashop.

    http://impresionarse.com/tarjetas/

  2. Jesus julio 22, 2014 at 5:13 pm - Reply

    Ya he logrado ponerlo en Prestashop, y funciona perfectamente.

    Muchas gracias.

    Te debo una.

    Saludos Jesús Vazquez

  3. Jesus julio 22, 2014 at 11:30 am - Reply

    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

  4. Jesus julio 21, 2014 at 7:16 pm - Reply

    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

    • Generacionweb julio 22, 2014 at 7:39 am - Reply

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

Escribe tu comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies