Accordeon sencillo con jQuery

Name: Accordeon sencillo con jQuery
Brand: Jose Aguilar
SKU: joseaguilarblog-1184
Availability: InStock
Rating: 5 (1 reviews)

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).

Lo primero que tendremos que hacer es incluir dentro de la etiqueta <head> los siguientes estilos y scripts:

<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>

Y luego en el <body>:

<div class="accordeon">
    <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>

Ver ejemplo en funcionamiento

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(1 voto, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

Una respuesta a “Accordeon sencillo con jQuery”

Nelia Couturier dice:

03/02/2012 a las 9:21

Just wanna remark on few general things, The website style is perfect, the articles is real fantastic : D.

Responder