Accordion: creiamolo usando CSS3

Partiamo subito da una premessa: esistono plugin creati apposta per realizzare accordion. Javascript la fa da padrona in questo senso e, nel caso più specifico, Jquery UI.

Quando si usa Javascript possono insorgere sempre gli stessi problemi, da quelli più soggettivi (come il fatto di non essere dei veri e propri web developer e quindi capirci poco o niente di come usare JS) a quelli più oggettivi (come possedere un sito web dinamico JS core visitato da utenti che hanno JS disattivato nel proprio browser).

Fortunatamente ci viene in aiuto il CSS3 che, grazie alle sue feature dinamiche sempre in aggiornamento ed espansione, ci permette di aggirare gli ostacoli di cui sopra.

E quindi, vediamo subito come creare il nostro bell’accordion usando solo CSS3.

Ringrazio la mia amica e collega Agnieszka Czerwinska che ha contribuito alla redazione del presente articolo.

Iniziamo: creiamo lo scheletro

Creiamo subito lo scheletro del nostro accordion in html.

Per questo esempio creeremo un div a cui abbineremo due classi, una per creare la base dell’accordion e l’altra ci servirà per renderlo un accordion orizzontale o verticale.

Dentro questo div creeremo poi tanti elementi <section>, quanti ce ne serviranno per il nostro accordion (per questo articolo ne useremo 3).

Innestati nei vari section, poi, inseriremo un <h2> per il titolo e un <p> per il nostro contenuto, come di seguito:

HTML:

<div class="accordion orizzontale">
<section>
<h2></h2>
<p></p>
</section>
<section>
<h2></h2>
<p></p>
</section>
<section>
<h2></h2>
<p></p>
</section>
</div>

A questo punto inseriamo i vari titoli e contenuti nelle varie sezioni. Dopo aver fatto ciò, assegniamo un id ad ogni <section> e, innestato nei tag <h2>, inseriamo un elemento ancora che rimandi all’id della sezione a cui l’h2 appartiene (al perché facciamo questo ci arriveremo dopo, portiamoci avanti col lavoro :) ), in questo modo:

HTML:

<div class="accordion orizzontale">
<section id=”sezione1”>
<h2><a href="#sezione1">Sezione 1</a></h2>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section id=”sezione2”>
<h2><a href="#sezione2">Sezione 2</a></h2>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section id=”sezione3”>
<h2><a href="#sezione3">Sezione 3</a></h2>
<p>Lorem ipsum dolor sit amet...</p>
</section>
</div>

Il nostro scheletro è pronto. Adesso, vediamo come donare, a questo scheletro, un aspetto accattivante e d’effetto con il CSS3.

L’aspetto del nostro accordion

Come già specificato prima, abbiamo assegnato due classi al nostro accordion:

1. la classe “accordion” ci servirà per impostarne l’aspetto

2. la classe “orizzontale”/”verticale” ci servirà per impostare la motilità del nostro accordion (insomma, farà il lavoro che altrimenti avrebbe dovuto fare javascript).

Iniziamo con l’impostare i vari valori per la classe “accordion”, quindi, in ogni suo aspetto, fino ad arrivare a <p> in questo modo:

CSS:

.accordion{
width:800px;
overflow:hidden;
margin:10px auto;
color:white;
background-color:#70b9f1;
padding:10px;
border-radius:5px;
}

.accordion section{
float:left;
color:#333;
overflow:hidden;
margin:3px;
cursor:pointer;
background-color:#3c7aa9;
}

.accordion section:hover{
background-color:#4287bd;
}

.accordion section p{
display:none;
}

Nulla di sorprendente. Abbiamo definito le dimensioni, il colore di background e del testo, il colore dell’hover, lo spazio tra le varie sezioni ecc. Ovviamente noi non vogliamo che il contenuto dei vari <p> sia visibile (altrimenti a cosa ci servirebbe l’accordion? :) ), quindi impostiamo la proprietà “display” su “none”.

Adesso, invece, passiamo a fare qualcosa di “speciale”. Ricordate che prima abbiamo impostato id e ancora? Adesso è il momento di usarli. E li useremo per impostare il comportamento delle varie sezioni quando ci cliccheremo sopra.

Per fare ciò, dobbiamo usare la pseudoclasse CSS “:target”. Un piccolo approfondimento su questo elemento. Questa pseudoclasse, in breve, ci permette di modificare le proprietà dell’elemento con id a cui l’elemento ancora cliccato fa riferimento.

Prendiamo come esempio quello corrente. Abbiamo impostante un elemento ancora nell’header di ogni sezione che fa riferimento all’id della sezione stessa. Adesso useremo “:target” in modo che, cliccando sull’header, andremo a modificare le proprietà che ci interessano delle varie <section> (giacché, appunto, le ancore rimandano proprio agli id delle varie sezioni).

Aggiungiamo, quindi, al nostro CSS il seguente codice:

CSS:

.accordion section:target{
background-color:#FFF;
padding:10px;
}

.accordion section:target:hover{
background-color:#FFF;
}

.accordion section:target h2{
width:100%;
}

.accordion section:target h2 a{
padding:0;
color:#333;
}

.accordion section:target p{
display:block;
}

.accordion section h2 a{
padding:8px 10px;
display:block;
font-size:16px;
font-weight:normal;
color:#eee;
text-decoration:none;
}

Al click dei vari elementi “ancora” verranno modificate le varie proprietà delle sezioni, compresi i <p> che torneranno visibili. L’ultimo blocco di codice, invece, ci serve solo per poter dare agli elementi <a> l’aspetto e la posizione che più ci aggrada.

Accordion orizzontale e verticale

A questo punto, in realtà, abbiamo già finito. L’accordion è pronto. Tuttavia, è un accordion grezzo e “selvaggio”, che non si comporta come vorremmo. Addomestichiamolo, dunque, e facciamolo settando il suo comportamento attraverso la classe “orizzontale”.

Ciò che vogliamo fare è donare una bella animazione pulita all’apertura delle schede (a questo proposito useremo la proprietà “transition” di CSS) e mettere la scritta degli headers in verticale per quando le schede sono chiuse, e nuovamente in orizzontale quando le schede sono aperte e, ovviamente, riposizionare gli headers stessi:

CSS:

.orizzontale section{
width:5%;
height:250px;
-moz-transition: width 0.2s ease-out;
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
}


.orizzontale section h2 {
width:240px;
position:relative;
left:-100px;
top:85px;
text-align:center;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

Ed ecco qui. Tutto è pronto. Per triggerare l’animazione e per riportare in orizzontale gli headers useremo, ovviamente, la vera star di questo articolo, cioè la pseudoclasse “:target”, in questa maniera:

.orizzontale :target{
width:73%;
height:230px;
}
.orizzontale :target h2{
top:0px;
left:0;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

Ci siamo. Il nostro accordion orizzontale è finalmente pronto. Il risultato finale è questo.

Se volete invece realizzare un accordion in verticale, i settaggi sono gli stessi, quello che cambierà sarà il valore di altezza e larghezza e non dovremo mettere gli headers in verticale, in questo modo:

.verticale section{
width:100%;
height:40px;
-webkit-transition:height 0.2s ease-out;
-moz-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}

.verticale :target{
height:250px;
width:97%;
}

.verticale section h2 {
position:relative;
text-align:center;
left:0;
top:-15px;

Conclusioni

L’accordion da noi ottenuto non ha nulla da invidiare a quelli che si otterrebbero utilizzando un plugin in JS. Trovate l’esempio qui e il codice da scaricare qui.

Il CSS possiede strumenti che ci permettono di dare al nostro sito dinamismo senza dover scomodare il Javascript. E quindi, perché non usarli?

Fatemi sapere cosa ne pensate, se quest’accordion vi piace come idea e se lo utilizzerete. Alla prossima!