En jquery existen dos funciones, las cuales utilizaremos continuamente, su nombre son hide() y show(), estas funciones como su nombre lo indica, ocultan y muestran un elemento.
La funcionalidad que se puede realizar, es ilimitada, basta con tener imaginación y podremos realizar cosas bastante estéticas; para utilizarla, seleccionamos el o los elementos que deseamos aplicar la función por medio de un selector y al igual que todas las funciones de jquery continuamos con punto y el nombre de la función, por ejemplo:
$("div").show();
Así de sencillo es su sintaxis, y esta linea ocultaría todos los divs de nuestra pagina; pero para sacarle jugo a estas funciones vamos a realizar algo mas interesante, realizaremos un acordeón, para ello tenemos el siguiente código:
Código HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>show hide</title>
<script src="../scripts/jquery.js"></script>
</head>
<style>
#acordeon{
width:500px;
border:1px solid #777;
}
.titulo{
background:#CCC;
cursor:pointer;
padding:3px;
border-bottom:1px solid #666;
}
.texto{
padding:5px;
}
</style>
<div id="acordeon">
<div >
<div class="titulo">Sección 1</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
<div>
<div class="titulo">Sección 2</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
<div>
<div class="titulo">Sección 3</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
<div>
<div class="titulo">Sección 4</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
</div>
<body>
</body>
</html>
Código Jquery
$(document).ready(function(){
//agregamos evento clic a los titulos
$(".titulo").click(function(){
//obtenemos el objeto jquery que ejecuto el evento
divTitulo=$(this);
//ocultamos todos los div con clase texto
$(".texto").hide();
//mostramos el div correspondiente a la sección
divTitulo.parent().find(".texto").show();
});
//ocultamos todos los divs de clase texto al iniciar
$(".texto").hide();
});
En el código anterior, tenemos un conjunto de divs los cuales tienen una clase llamada sección y una llamada texto, los divs de clase sección realizaran la función que activa la sección del texto del acordeón el cual se encuentra en el div de clase texto.
En el código de jquery, agregamos un evento a los divs de clase sección para cuando den clic en ellos se muestre el div correspondiente y se oculten todos los demás, utilizando la función parent() y find() de jquery (las cuales explico en este articulo), accedemos a el elemento correspondiente a mostrar.
A continuación dejo el ejemplo funcionando, solo den clic a una sección y verán su funcionalidad:
En este capitulo vimos como podemos hacer un uso interesante por medio de las funciones hide() y show() de jquery.
Ir al Capitulo Siguiente (8.- Callbacks).
Ir al Capitulo Anterior (6.- Eventos).
