Un accordion in jQuery si basa sull'alternanza degli stati visibile ed invisibile del contenuto a cui fa riferimento l'elemento che controlla l'accordion (di solito un'intestazione o un link). In questo articolo vedremo un accordion jQuery reso complesso dal riposizionamento del contenuto di riferimento e dalla modifica del layout del link di attivazione.
Partiamo dalla seguente marcatura:
<div id="accordion-wrapper">
<ul id="accordion">
<li>
<a href="#">1</a>
<div class="content">
...
</div>
</li>
<li>
<a href="#">2</a>
<div class="content">
...
</div>
</li>
<li>
<a href="#">3</a>
<div class="content">
...
</div>
</li>
</ul>
</div>
E dai seguenti stili CSS:
#accordion-wrapper {
width: 80%;
max-width: 800px;
margin: 2em auto;
}
#accordion {
height: 60px;
margin: 0;
padding: 0;
list-style: none;
}
#accordion li {
width: 60px;
height: 60px;
margin-right: 1em;
position: relative;
background: url(img/number.png) no-repeat;
float: left;
}
#accordion a {
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 1.2em;
text-decoration: none;
}
#accordion a.active {
background: #000;
border-radius: 5px 5px 0 0;
}
div.content {
display: none;
position: absolute;
top: 0;
left: 0;
padding: 1em;
background: #000;
border-radius: 5px;
color: #fff;
font-size: 1.2em;
line-height: 1.3;
width: 300px;
z-index: 1000;
}
Dobbiamo verificare se l'elemento con classe content è visibile o meno. Se non è visibile, prima di usare il metodo slideDown() dobbiamo riposizionarlo sotto il link e al contempo cambiare il layout del link. Di contro se l'elemento è visibile dobbiamo usare il metodo slideUp(), riposizionare l'elemento e riportare il layout del link allo stato originario.
Ecco il codice:
$(function() {
var handleDisplay = function(element, trigger) {
if(element.is(':hidden')) {
trigger.addClass('active');
element.css({top: 51}).slideDown(800).
parents('#accordion').find('div.content').
not(element).css({display: 'none', top: 0});
element.parents('#accordion').find('a').not(trigger).
removeClass('active');
} else {
element.slideUp(800, function() {
$(this).css({top: 0});
});
trigger.removeClass('active');
}
};
$('a', '#accordion').each(function() {
var $a = $(this);
var $element = $a.next();
$a.click(function(e) {
handleDisplay($element, $a);
e.preventDefault();
});
});
});
Potete visionare l'esempio finale di seguito.