Para mostrar un simple acordeon de 3 elementos empleariamos el siguiente codigo:
<html>
<head>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3"});
});
</script>
</head>
<body>
<div id="accordion">
<div>
<h3><a href="#">Lorem ipsum 1</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Lorem ipsum 2</a></h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</div>
<div>
<h3><a href="#">Lorem ipsum 3</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</div>
</body>
</html>
En primer lugar cargamos el fichero de estilos y los javascript de jQuery UI, a continuación creamos el acordeón en la capa con id accordion, estableciendo que las etiquetas h3 serán las cabeceras del mismo.<head>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3"});
});
</script>
</head>
<body>
<div id="accordion">
<div>
<h3><a href="#">Lorem ipsum 1</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Lorem ipsum 2</a></h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</div>
<div>
<h3><a href="#">Lorem ipsum 3</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</div>
</body>
</html>
Una vez creado el acordeón podemos personalizar diferentes características. Algunas de las opciones de personalización son:
Iconos: el acordeón trae unos iconos por defecto para cuando esta desplegado o cerrado, pero estos iconos podemos cambiarlos de la siguiente forma:
var icons = {
header: "ui-icon-mail-closed",
headerSelected: "ui-icon-mail-open"
};
$("#accordion").accordion({ icons: icons});
$( "#toggle" ).button().toggle(function() {
$( "#accordion" ).accordion( "option", "icons", false );
}, function() {
$( "#accordion" ).accordion( "option", "icons", icons );
});
Creamos la variable icons, donde estableceremos los dos iconos a nuestro gusto (iconos proporcionados por jQuery UI), A continuación creamos el acordeón pasándole en el parámetro icons la variable icons. Por último, hay que crear sobreescribir el evento togle de nuestro acordeón #accordion.
header: "ui-icon-mail-closed",
headerSelected: "ui-icon-mail-open"
};
$("#accordion").accordion({ icons: icons});
$( "#toggle" ).button().toggle(function() {
$( "#accordion" ).accordion( "option", "icons", false );
}, function() {
$( "#accordion" ).accordion( "option", "icons", icons );
});
AutoHeight: por defecto, los subelementos del acordeon tendrán el mismo tamaño por lo que si colocas un texto muy grande este se cortará, o por el contrario, si pones un texto muy corto quedará mucho espacio en blanco. Para conseguir que los subelementos se autoajusten a su altura lo haremos:
$("#accordion").accordion({ autoHeight: false});
Cerra al iniciar: otra opción por defecto del acordeon es que al iniciarlo se despliega el primer elemento. Para hacer que al arrancar no se abra ningún elemento lo hariamos:
$("#accordion").accordion({ active: false});
Por lo tanto, un ejemplo completo de personalización del acordeón será:
$("#accordion").accordion({
header: "h3",
autoHeight: false,
icons: icons,
active: false,
navigation: true });
Para ver más opciones de configuración puedes verlas en la documentación de jQuery UI.
header: "h3",
autoHeight: false,
icons: icons,
active: false,
navigation: true });
De lujo tío, es lo que iba buscando...gracias x la ayuda.. :)
ResponderEliminar¿como quitarle el color gris del header,, porfa?, buenisimo tu post men
ResponderEliminarTienes que modificar la clase ui-accordion-header y ten en cuenta que el fondo es una imagen, por lo que tendrás que modificar la propiedad background-image
EliminarConsulta, si en el texto quiero poner un "ver más" y linkearlo a otra página no me funciona, ¿cómo lo corrijo? Gracias.
ResponderEliminarEste comentario ha sido eliminado por un administrador del blog.
Eliminarcomo hago para que mi titulo de las pestañas queden en el centro y también si es posible que el titulo este con otra letra ?
ResponderEliminarcomo hacer para que todas las secciones estén activas?
ResponderEliminar