4 modi per creare fantastiche accordion in CSS

Accordion o fisarmoniche con contenuti un elemento web piuttosto popolare nella progettazione di un sito. Puoi utilizzarle per molte cose diverse: per varie menu, le liste, le immagini, per anteprima di  articoli, per avvisi o annunci e ci puoi inserire anche  video

La maggior parte delle realizzazione di accordion  si basa su JavaScript, principalmente su jQuery, ma poiché l'uso di CSS3 ormai è molto diffuso, possiamo sfruttare tutta la forza di questo linguaggio web insieme con  HTML , che ci permetterà realizzare certe cose senza ricorrere al utilizzo di li  JavaScript.

La creazione di accordion soltanto su CSS può a prima vista apparire molto difficile ma in questo articolo scopriremo 4 possibilità che abbiamo per farlo in puro CSS

Per creare passagi fra tab in  CSS ci sono due approcci principali e ciascuno di essi ha due soluzioni. Il primo approccio utilizza elementi nascosti, mentre il secondo utilizza pseudo-selettori CSS.  

1. Soluzione con pulsante radio

Il metodo del pulsante radio aggiunge un bottone radio nascosto e un tag  label corrispondente a una delle tab della fisarmonica. La logica è semplice: quando l'utente seleziona una scheda, in realta seleziona un pulsante radio che appartiene ad una delle linguette(tab), come quando compiliamo un modulo html. Quando si fa clic sul titolo di tab successivo della fisarmonica, viene abilitato il pulsante radio successivo e rispetivo collegemnto a contenuto di questo tab , ecc.

 

Con questo  metodo posiamo tenere aperta solo una scheda.

Vediamo subito il markup  html del accordion :

<div class="css-accordion">
 
  <!-- Una linguetta (Tab) al interno del accordion -->
  <div>
    <input type="radio" name="tab-1" id="tab-1">
    <label for="tab-1">Title of Tab 1</label>
     
    <div class="tab-content">
      <h2>Titolo del contenuto </h2>
      <p>Nostro contenuto... </p>
    </div>
   
  </div>
   
  <!-- Altri Tab hanno la stessa struttura html  -->
   
</div>

È necessario aggiungere anche una barra con il titolo per ogni linguetta del accordion. Per fare questo dovremo aggiungere delle regole CSS, vediamo come è fatto.

Schede verticali con altezza fissa

In questa soluzione (vedere l'esempio qui sopra), abbiamo  nascosto il pulsante radio attraverso la proprietà   display: none; Con un altra regola abbiamo posizionato relativamente la barra con il titolo della  nosta tab del accordion racchiuso nel tag label e per creare il nostro bottone di interruttore sulla destra abbiamo usato pseudo-elemento label:after  

Attraverso  quest'ultimo abbiamo inserito un bottone interruttore contrassegnato con un segno verde + che apre la linguetta. E nella posizione aperta abbiamo anche previsto un segno interruttore in forma di  "-".

Nel CSS le linguette chiuse vengono attivate e aperte attraverso selettore element + element .

È inoltre necessario indicare  un'altezza fissa allo spazio per il contenuto della scheda aperta. Per realizzare questo dobbiamo selezionare l'aria per il contenuto della scheda aperta (contrassegnata con la classe tab-content  nel codice  HTML sopra) con l'aiuto del selettore CSS element1 ~ element2

La logica di base del CSS è la seguente:

input[type=radio] {
  display: none;
}
label {
  position: relative;
  display: block;
}
label:after {
  content: "+";
  position: absolute;
  right: 1em;
}
input:checked + label:after {
  content: "-";
}
input:checked ~ .tab-content {
  height: 150px;
}

Esempio . Cliccrae sulla croce per aprire le linguette

Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.

Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.

Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda odio provident ullam culpa rem tempora voluptatem inventore facere adipisci doloribus dolorum ad maxime. Consectetur reiciendis ad earum aspernatur at quibusdam cupiditate rerum ipsam consequatur suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab rem explicabo exercitationem unde harum? Iste nobis quae animi illum laborum incidunt hic illo ad repellat repudiandae et alias facere magni.

Accordion di immagini con pulsanti radio

Questa bella fisarmonica di immagini usa la stessa technica di pulsanti radio che abbiamo visto sopra, ma invece di label, qui sono stati usati  tag figcaption di HTML per realizzare l'effetto di accordion.

Il CSS è un puo diverso, soprattutto perché in questo caso le linguette non sono posizionate verticalmente ma orizzontalmente. E stato utilizzato il selettore CSS elemento + elemento  (usato nel caso precedente per aprire e chiudere le schede) per garantire che almeno una parte di immagini coperti rimane ancora visibile. Clicandola potrai spostarsi da una immagine ad altra.

Esempio . Cliccrae su parte visiva della immagine sucessiva  per aprire le linguette

image01
True Colors
image02
Honest Light
image03
Silent Serenity
image04
Warm Welcome
image05
Sensible Magic
image06
Lovely Midnight
image07
Illuminated Darkness
image08
Happy Child

Se l 'esempio ti è piacito visita la pagina del autore. Dove potresti scoprire come è fatto nel detaglio accordion, nonche i codici HTML e CSS per realizzare magari un accordion del genere nel tuo progetto

 

2. Soluzioni con Checkbox

Il metodo con checkbox  utilizza l'input della casella di controllo anziché il pulsante radio. Quando l'utente seleziona una tab, in realta seleziona uno checkbox.

La differenza rispetto al metodo del pulsante radio è che qui è possibile aprire contemporaneamente più di una scheda, proprio come è possibile selezionare  più di una casella di controllo all'interno di un modulo.

D'altra parte, le tab  non si chiuderanno da soli quando l'utente scheglie di aprire altro tab. La logica dell markup HTML è la stessa di prima, ma in questo caso utilizeremo al posto di pulsanti radio checkbox.

<div class="css-accordion">
 
  <!-- One Tab Inside The Accordion -->
  <div>
    <input type="checkbox" name="tab-1" id="tab-1">
    <label for="tab-1">Title of Tab 1</label>
     
    <div class="tab-content">
      <h2>Content Title (don't use h1 tag here)</h2>
      <p>Some content.... </p>p>
    </div>
   
  </div>
   
  <!-- Other Tabs with The Same Structure -->
   
</div>

Altezza fissa per il contenuto del accordion

Se si desidera impostare altezza fissa per il contenuto, la logica del CSS è praticamente uguale a quella dove abimo utilizzato pulsante radio, cambia solo il  tipo di input che passa da input radio a checkbox come controllo.

Vediamo il nostro nuovo esempio di accordion

Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.

Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.

Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda odio provident ullam culpa rem tempora voluptatem inventore facere adipisci doloribus dolorum ad maxime itaque quasi animi aliquid voluptates rerum expedita? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui culpa amet neque nostrum cumque eaque corrupti ad accusantium? Consectetur reiciendis ad earum aspernatur at quibusdam cupiditate rerum ipsam consequatur suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab rem explicabo exercitationem unde harum? Iste nobis quae animi illum laborum incidunt hic illo ad repellat repudiandae et alias facere magni.

 

Accordion a tab con altezza variabile

Quando sono aperte piu di una scheda  allo stesso tempo,  l'altezza fissa può influire negativamente sull'esperienza dell'utente poiché l'altezza della fisarmonica può aumentare significativamente. Ciò può essere migliorato se si passa dal'altezza fissa all'altezza variabile; Ciò significa che l'altezza delle schede aperte si espande o si restringe in base alla dimensione del contenuto che detengono.

A tal fine è necessario modificare l'altezza fissa del contenuto della linguetta ad una altezza massima e utilizzare le relative unità:

input[name='panel']:checked ~ .accordion__content {
  /* puoi provare di cambiare valore della altezza massima  */
  max-height: 50em;
}

3. Soluzione con :target

:target è uno dei pseudo-selettori CSS3. Con il suo aiuto è possibile collegare un elemento HTML ad un tag di ancoraggio nel modo seguente:

<section id="tab-1">
  <h2><a href="#tab-1"></a>Title of the Tab</a></h2>
  <p>Content of the Tab</p>
</section>

Quando l'utente fa clic sul titolo di una scheda, l'intera sezione verrà aperta grazie al: pseudo-selettore :target e l'URL verrà anche modificato nel seguente formato: www.ioeweb.it/#tab-1.

La scheda aperta può essere realizzata  in CSS con l'aiuto di proprieta section:target{...}. Ti propongo un ottimo tutorial che descrive tutti I passaggi di realizzazione di un accordion con aiuto di pseudo-selettore:target che puo essere realizzato sia in verticale sia in orizzontale.

Esempio

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.

Services

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.

Blog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.

Portfolio

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.

Contact

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Praesent at magna non massa dapibus scelerisque in eu lorem.

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida.scelerisque in eu lorem.

Services

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat.

Blog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

Portfolio

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.

Contact

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.

Per scoprire il codice e leggere di piu visita la pagina del autore

La principale inconvenienza della soluzione con :target  è che cambia l'URL quando l'utente fa clic sulle schede. Ciò influisce sulla cronologia del browser e il browser non potrà ritornare l'utente indietro alla pagina precedente, ma lo riporta allo stato precedente del accordion. Rimanendo sulla stessa pagina

4. La soluzione con :hover

Quest'ultimo difetto può essere superato se utilizziamo pseudoclass CSS : hover  invece di: target, ma in questo caso le schede non reagiscono al click ma all'evento hover passagio del mouse. Il trucco utilizzzato qui è che è necessario nascondere gli elementi  disabilitati, o ridurre la loro larghezza o altezza  a seconda del layout delle schede in verticale o orizzontale

L'elemento :hover deve essere reso visibile e impostato a tutta la larghezza / altezza per far funzionare la fisarmonica.

L'accordion che vedi qui sotto è stata fatta con utilizzo di pseudo-classe :hover  Quindi avvicinando il tuo puntatore del mouse vedrai spostarsi diapositive

Per legger di piu clicca qui

Letto 954 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso