Ecco un breve articolo su come realizzare un accordion orizzontale utilizzando Flexbox, il layout model contenuto nelle specifiche CSS3.
Lavorando recentemente su un progetto ho dovuto costruire da zero un accordion orizzontale. Ho cercato di ridurre al minimo l’uso di Javascript e affidarmi totalmente alla Flexbox CSS, evitando di ricorrere a librerie di terze parti. Il Flexible Model Box infatti è un layout adatto alla distribuzione equo dello spazio e all’allineamento dei contenuti su una sola dimensione.
Condivido con voi il risultato, step per step.
Premessa
A differenza di quello che si può già trovare sul fidato StackOverflow, vorrei poter mostrare sempre i titoli delle sezioni (ruotati di 90°), renderlo facilmente editabile e adattabile per essere incorporato in WordPress con l’uso di ACF.
Qui non vedremo l’integrazione dei campi personalizzati – se siete curiosi fatemelo sapere- ma soltanto il markup stilato e lo script creato ad hoc.
Markup
Iniziamo dando uno sguardo al markup.
<div class="accordion">
<section class="accordion--el el-1 open">
<div class="accordion--el-title">
<h2>Sezione #1</h2>
</div>
<div class="accordion--el-content">
<p>Contenuto sezione #1</p>
</div>
</section>
<section class="accordion--el el-2">
<div class="accordion--el-title">
<h2>Sezione #2</h2>
</div>
<div class="accordion--el-content">
<p>Contenuto sezione #2</p>
</div>
</section>
<section class="accordion--el el-3">
<div class="accordion--el-title">
<h2>Sezione #3</h2>
</div>
<div class="accordion--el-content">
<p>Contenuto sezione #3</p>
</div>
</section>
</div>Un accordion è un elemento grafico di interazione che permette di espandere e comprimere delle porzioni di contenuto. Queste porzioni dispongono di un titolo e di contenuto. Con questo identikit ne ho dedotto che il tag semanticamente corretto per racchiudere il contenuto di ogni blocco dell’accordion è <section>. Riporto la definizione presente su MDN:
L’elemento HTML section (
https://developer.mozilla.org/it/docs/Web/HTML/Element/section<section>) rappresenta una sezione generica di un documento, ovvero un gruppo tematico di contenuti, tipicamente provvisto di un’intestazione. Ogni<section>dovrebbe essere identificabile, solitamente utlizzando un’intestazione (<h1>–<h6>) come fliglio dell’elemento<section>
Stili
Sistemato il markup è il momento di dedicarci agli stili:
// Accordion
.accordion {
display: flex;
flow: row nowrap;
// singola sezione dell'accordion
&--el {
position: relative;
display: inline-flex;
flex: 3 3 100%;
height: 200px;
min-width: 48px;
border: 1px solid grey;
overflow: hidden;
transition: flex 0.75s ease-in-out;
// contenitore titolo
&-title {
display: inline-flex;
justify-content: center;
width: 48px;
background-color: lightgrey;
& h2 {
height: 32px;
margin: 0;
transform: rotate(-90deg);
transform-origin: 80% 140% 0;
white-space: nowrap;
line-height: 1;
}
}
// contenitore paragrafi
&-content {
display: inline-flex;
margin: 16px;
width: 100%;
min-width: 450px;
}
// classe per la sezione aperta
&.open {
flex: 3 1 100%;
}
}
}Per animare l’apertura utilizzo una transition su flex. Generalmente è supportato per i browser moderni, ma per quelli più datati (es. IE10) si potrebbe avere qualche problema con valori flex-shrink pari a 0.
Script
Ora usiamo un po’ di javascript per rendere interattivo l’accordion:
// Raccogliamo tutti gli elementi con classe .accordion--el
var accordionEl = document.querySelectorAll(".accordion--el");
// Per ognuno aggiungiamo un event listener al clic
accordionEl.forEach((element) =>
element.addEventListener(
"click",
function (e) {
let accordion = this.parentNode;
let openEl = document.querySelectorAll(".open");
// aggiungiamo la classe open all'elemento selezionato
e.currentTarget.classList.add("open");
// per ognugno degli altri elementi, se non sono il target del click, togliamo la classe open
for (let i = 0; i < openEl.length; i++) {
if (openEl[i] != e.currentTarget) {
openEl[i].classList.remove("open");
}
}
element.stopPropagation;
},
false
)
);Fine! L’accordion è completo e pronto per essere implementato. Ecco il risultato live.
Lascia un commento