acordeon simple con jquery
Los menús navegables estilo acordeón son un recurso muy usado actualmente, gracias a que estos nos permiten mostrar mucha información en un espacio reducido lo cual los hacen muy útiles. Hoy vamos a crear un acordeón sencillo con la librería Jquery y haciendo solo uso de unas cuantas etiquetas HTML (H3 y p), pues no se diga mas comencemos :
Primero creamos un documento HTML al que podemos llamar acordeón, con la estructura siguiente:
<!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>Acordeón</title>
</head>
<body>
<div>
<h3>Tablero</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
ante at feugiat tincidunt,enim massa gravida metus, commodo lacinia massa diam
vel eros. Proin eget urna. Nunc fringilla neque vitae odio.
Vivamus vitae ligula.</p>
<h3>Entradas</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam
vel eros. Proin eget urna. Nunc fringilla neque vitae odio.
Vivamus vitae ligula.</p>
<h3>Encuestas</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
ante at feugiat tincidunt,enim massa gravida metus, commodo lacinia massa diam
vel eros. Proin eget urna. Nunc fringilla neque
vitae odio. Vivamus vitae ligula.</p>
<h3>Objetos</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
ante at feugiat tincidunt,enim massa gravida metus, commodo lacinia massa diam
vel eros. Proin eget urna. Nunc fringilla neque
vitae odio. Vivamus vitae ligula.</p>
<h3>Herramientas</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam
vel eros. Proin eget urna. Nunc fringilla neque
vitae odio. Vivamus vitae ligula.</p>
</div>
</body>
</html>
Como podemos observar la estructura del código es algo básico, se crea una Clase div la cual se hace llamar “accordion” dicho div es el que contendrá los menús de nuestro acordeón, posteriormente se definen los elementos del acordeón para los títulos se hace uso de la etiqueta H3 y para el contenido la etiqueta P, una ves definida nuestra estructura HTML procedemos a crear un archivo css el cual lo llamaremos style.css y pegamos el siguiente código:
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(../img/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
Básicamente lo que hicimos fue crear el estilo de la clase “accordion” y algunos estilos para el momento de dar click en nuestros títulos del acordeón
Ahora procedamos a la creación de nuestro archivo js el cual lo llamaremos acordeon.js y pegamos el siguiente código:
$(document).ready(function(){
$(“.accordion h3:first”).addClass(“active”);
$(“.accordion p:not(:first)”).hide();
$(“.accordion h3″).click(function(){
$(this).next(“p”).slideToggle(“slow”)
.siblings(“p:visible”).slideUp(“slow”);
$(this).toggleClass(“active”);
$(this).siblings(“h3″).removeClass(“active”);
});
});
Como podemos observar en la segunda linea de nuestro código a nuestra etiqueta H3 le activamos el estilo que creamos en nuestra hoja de estilo style.css, posteriormente en la siguiente linea indicamos que por default nuestro contenido rodeado por la etiqueta P se encuentre oculta, en las siguientes lineas de código se establece la acción al hacer click en los menús de nuestro acordeón.
Nota: Esta es la foma en la que yo comúnmente agrego el código javascript con la linea “$(document).ready(function()” le estoy indicando que quiero que me cargue el código jquery una ves que el DOM esta listo osea la estructura HTML , si esta forma no te gusta igual puedes agregar código dentro del documento HTML entre las etiquetas del head y quedaría de la siguiente forma:
<head>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.accordion h3:first”).addClass(“active”);
$(“.accordion p:not(:first)”).hide();
$(“.accordion h3″).click(function(){
$(this).next(“p”).slideToggle(“slow”)
.siblings(“p:visible”).slideUp(“slow”);
$(this).toggleClass(“active”);
$(this).siblings(“h3″).removeClass(“active”);
});
});
</script>
</head>
Pues bien queda en ti decidir de que manera usas el código, supongamos que usas mi método, lo siguiente es cargar nuestros archivos css y js , así como la librería jquery que en mi caso es la 1.3.1 a nuestro documento HTML dentro de la etiqueta head de nuestro código HTML y quedaría de la siguiente manera:
<head>
<link rel=”stylesheet” href=”CSS/style.css” type=”text/css” />
<script type=”text/javascript” src=”JS/jquery.js”></script>
<script type=”text/javascript” src=”JS/acordeon.js”></script>
</head>
Nota: en mi caso cree una carpeta llamada CSS para style.css y una carpeta JS para jquery y acordeón
Y listo tenemos acordeon que nos puede ser de gran ayuda, aca un link de como se debe de ver
fuente: aplendamos