Realizzare un accordion orizzontale con jQuery non è del tutto intuitivo, in quanto la libreria è priva di metodi specifici. Ovviamente possiamo usare dei plugin, ma lo scopo di questo articolo è mostrare come possiamo cavarcela da soli con il solo aiuto di qualche regola CSS e del metodo animate(). Il risultato finale prevede che l'accordion abbia un'altezza definita per consentire un effetto di scorrimento fluido. Ovviamente questa soluzione si adatta a casi specifici in cui il contenuto (testuale e non) sia conosciuto in anticipo. Vediamo l'implementazione.
Cominciamo dalla marcatura:
<div class="accordion">
<h2>Titolo 1</h2>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="accordion">
<h2>Titolo 2</h2>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="accordion">
<h2>Titolo 3</h2>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet.</p>
</div>
Allineeremo l'intestazione e il contenuto dell'accordion usando il floating. Tale contenuto avrà una larghezza azzerata e un offset sinistro pari alla sua larghezza finale per creare l'effetto di espansione e scorrimento:
body {
margin: 0;
padding: 2em 0;
font: 100% Arial, sans-serif;
}
p {
margin: 0;
line-height: 1.4;
padding: 5px;
}
h2 {
margin-top: 0;
font-size: 1.6em;
color: #fff;
padding: 5px;
text-transform: uppercase;
width: 290px;
float: right;
background: #a40 url(open.png) no-repeat 0 50%;
text-indent: 35px;
cursor: pointer;
}
div.accordion {
margin: 0 auto 1em auto;
width: 600px;
height: 100%;
overflow: hidden;
}
div.accordion-content {
width: 0px;
background: #333;
color: #fff;
float: left;
margin-bottom: 10px;
position: relative;
left: 300px;
overflow: hidden;
height: 2.5em;
}
L'altezza del contenuto dell'accordion è stata già definita nel CSS. Questo consentirà a jQuery di mostrare l'effetto senza un'inutile espansione in verticale. Con jQuery dobbiamo associare un evento click alle intestazioni e verificare che il contenuto dell'accordion sia visibile o meno. Per far ciò verificheremo che la sua larghezza sia uguale o diversa da 0 pixel:
$(function() {
$('h2', 'div.accordion').each(function() {
var $h2 = $(this);
var content = $h2.next();
$h2.click(function() {
if(content.css('width') == '0px') {
content.animate({
width: 300,
left: 0
}, 'slow');
} else {
content.animate({
left: 300,
width: 0
}, 'slow');
}
});
});
});
Potete visionare l'esempio finale in questa pagina.