Acordeón sencillo y elegante
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 class="accordion">
<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
Archivado bajo: Applendamos a Crear:, Recursos de Diseño | Etiquetado: acordeón, applendamos, CSS, Jquery, Recursos Web
Muy bueno el ejemplo. Me quedé husmeando un poco tu buen blog.
Seguiré pasando
Gracias
Que tal @goldenahimaaz , gracias, y solo me resta darte la Bienvenida , Saludos
Me parece que el accordeon del ejemplo en ff y en e7 tiene un movimiento poco agradable.
ademas de que en e6 no funciona .. jeje
es solo una observación …
Mentiría si te digo que lo prove en IE ya que trabajo en Mac… pero seguramente si es así….Mugre IE jeje… en Firefox si me funciona bien, lo bueno en estos casos es que asi aprendemos a batallar con el IE para que funcione correctamente
Le acabo de dar una provadita al acordeon en IE 6 y 7 y todo funciona bien, quizas alguna parte del codigo pusiste mal @jairo
[...] aplendamos Publicado en JQuery | No [...]
Mil gracias por este aporte! me has dado la luz al final del túnel en un trabajo pendiente y urgente.
De nada @Lyxxar, que bueno que te haya servido el tuto, Saludos y sigue visitando Applendamos :d
Es muy efectivo pero tarda mucho deberias probar utilizando el core que ya trae integrago la sección UI, del jquery
seria interesante que compartieras lo que mencionas, ya que yo no conozco mucho el lenguaje, saludos @Uziel
Hola, esta simple y super util tengo una duda, y esque e tratado de entender como funciona en si para lograr que comienzen todos cerrados pero no lo e logrado.
podrias indicarme como y donde para que el acordeon este cerrado al cargar por primeravez?
saludos
Hola que tal @Carlitos, viendo tu mensaje me puse a ver como podíamos lograr ese efecto que quieres, aunque me lleve un rato ya pude resolverlo (como moraleja , cuando busquemos una libreria guardemos la documentación si no, nos pasa que luego no sabemos que mover jeje).
Bueno para resolver tu duda primero abre tu archivo “acordeon.js” que esta en la carpeta JS, localizas la linea siguiente :
$(“.accordion h3:first”).addClass(“active”);
abajo de esta agregas la siguiente linea :
$(“.accordion p:first(:first)”).hide();
y ya debería de funcionar, lo que le decimos al html es que seleccione el primer párrafo y que lo esconda con la instrucción hide, no soy un experto en esto pero espero te haya servido saludos
Muchas gracias, tan solo que las comillas que usaste daban error de sintaxis pero al remplasarlas funciono altiro jeje y que la flechita del lado derecho se muestra alrevez aunque este cerrado pero son detalles menores, me a servido mucho
muchas gracias
@Diego Armando… solucione lo de la flechita del primer H3 que se mostraba alrevez al darle la orden de que por vez primera el acordion estubiera cerrado.
arriba del nuevo stracto de codigo que me dijiste que agregara hay que agregar esto tambien:
$(“.accordion h3:first(:first)”).toggleClass(“active”);
en conclusion, para que el acordion cargue cerrado… abajo de las lineas 3 y 4 del archivo acordion.js hay que agregar:
$(“.accordion h3:first(:first)”).toggleClass(“active”);
$(“.accordion p:first(:first)”).hide();
saludos
Perfecto @Carlitos, que bien que compartas lo que lograste así todos aprendemos saludos
Muchas gracias por el aporte, se ve q dedicas tu tiempo a los demas y eso se agradece, gracias.
gracias… se hace lo que se puede saludos