Ejemplo Mostrando y ocultando div con JQuery

En este ejemplo utilizaremos jQuery para poder darle efecto a un elemento como ser el ocultar y mostrar contenido que forme parte de un div.

Aqui el código:



<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery appletenhtml</title>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
    <div class="container-fluid-">
        <div class="row">
            <div class="col-md-4 caja col-centrar">
                <h3>appletenhtml</h3>
                <br>                                
                <div id="base" class="mice" title="Titulo del contenedor">click para mostrar contenido</div>          
                <div id="panel">
                    HD el dia que mires esto quiero que sepas que te recuerdo... Alola!
                </div>
             
            </div>
        </div>
    </div>    
 
     
      <script src="js/jquery-3.2.0.min.js"></script>
      <script src="js/codigo.js"></script>
   
</body>
</html>

El codigo anterior solo representa el texto del cuerpo que llevaria la pagina

Utilizando las  funciones de jquery le añadiriamos las acciones nesesarias para que el div se muestre y oculte



$(document).ready(function(){
//efectuando accion dando click a base
    $('#base').click(function(){
        //mostrando el div#panel oculto si le damos click a base
        $('#panel').slideDown();
        $(this).height('50px');
    });
 
    //efectuando accion dando click a base
     $('#panel').click(function(){
        //ocultando el div#panel  si le damos click a base tardandose 4 segundos
        $(this).slideUp(4000);
    });
 
    //mostrando el titulo del dicv
    $('#base').click(function(){
       var t =$(this).attr('title');
        $('#panel').html(t);
             
    });
 
});








Comentarios

Entradas más populares de este blog

Ejemplo de suma Pascal

Solucion al error collation desconocida: 'utf8mb4_0900_ai_ci'