Collapse
Elementi richiudibili (in gergo definiti collassabili o collapse), che possono essere attivati indipendentemente l’uno dall’altro oppure in modo esclusivo con l’attivazione di solo un blocco alla volta (in gergo definiti fisarmoniche o accordion).
Come funziona
Per ottenere un gruppo di elementi mutuamente richiudibili (o collapse), è sufficiente aggiungere ad ogni elemento le due classi .accordion e .accordionv3.
Nei singoli elementi, l’attributo data-bs-target contiene la ID dell'elemento che, al click, viene aperto o chiuso.
Accordion con paragrafo di testo semplice
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
<div class="accordion accordionv3 p-3" id="collapsev3">
<div class="accordion-item">
<h2 class="accordion-header" id="heading_a">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc1" aria-expanded="true" aria-controls="acc1">
Elemento Richiudibile #1
</button>
</h2>
<div id="acc1" class="accordion-collapse collapse show" role="region" aria-labelledby="heading_a">
<div class="accordion-body">
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header " id="heading_c">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc3" aria-expanded="false" aria-controls="acc3">
Elemento Richiudibile #2
</button>
</h2>
<div id="acc3" class="accordion-collapse collapse" role="region" aria-labelledby="heading_c">
<div class="accordion-body">
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header " id="heading_D">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc4" aria-expanded="false" aria-controls="acc3">
Elemento Richiudibile #3
</button>
</h2>
<div id="acc4" class="accordion-collapse collapse" role="region" aria-labelledby="heading_D">
<div class="accordion-body">
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
</div>
</div>
</div>
</div>Due colonne, paragrafo di testo, icona e link
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
<div class="row">
<div class="accordion accordionv3 p-3">
<div class="accordion-item">
<h2 class="accordion-header" id="heading_es1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc_es1" aria-expanded="true" aria-controls="acc_es1">
Elemento Richiudibile #1
</button>
</h2>
<div id="acc_es1" class="accordion-collapse collapse show" role="region" aria-labelledby="heading_es1">
<div class="accordion-body d-flex flex-column flex-lg-row">
<div class="col-12 col-lg-8 pe-0 pe-lg-4">
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
</div>
<div class="col-12 col-lg-4 d-flex flex-column align-items-center pt-3 pt-lg-0">
<img class="m-auto d-block " src="./dist/svg/logo_otto.svg" alt="Otto">
<a href="#" class="m-auto mt-2 fw-semibold">Link a contenuto</a>
</div>
</div>
</div>
</div>
</div>
</div>Due colonne, testo e lista card “solo link”
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
<div class="row">
<div class="accordion accordionv3 p-3">
<div class="accordion-item">
<h2 class="accordion-header" id="heading_es2">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc_es2" aria-expanded="true" aria-controls="acc_es2">
Elemento Richiudibile #1
</button>
</h2>
<div id="acc_es2" class="accordion-collapse collapse show" role="region" aria-labelledby="heading_es2" data-landmark-index="1">
<div class="accordion-body d-flex flex-column flex-lg-row">
<div class="col-12 col-lg-8 pe-0 pe-lg-4">
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
</div>
<div class="col-12 col-lg-4 d-flex flex-column align-items-center pt-3 pt-lg-0">
<div class="card-wrapper base-card w-100 pb-0">
<div class="card card-img no-after">
<div class="card-body flex-column pt-0 pb-0 pl-3 pr-3">
<div class="col-12 d-flex mt-2 mb-2 align-items-center">
<div class="col-10">
<h5 class="card-title mb-0"><a href="#" title="lorem ipsum" class="" data-focus-mouse="false">Link a contenuto</a></h5>
</div>
<div class="col-2 d-flex justify-content-end">
<a class="read-more" href="#" title="lorem ipsum">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="card-wrapper base-card w-100 mt-3 pb-0">
<div class="card card-img no-after">
<div class="card-body flex-column pt-0 pb-0 pl-3 pr-3">
<div class="col-12 d-flex mt-2 mb-2 align-items-center">
<div class="col-10">
<h5 class="card-title mb-0"><a href="#" title="lorem ipsum" class="" data-focus-mouse="false">Link a contenuto</a></h5>
</div>
<div class="col-2 d-flex justify-content-end">
<a class="read-more" href="#" title="lorem ipsum">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Due colonne, testo e lista link
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
<div class="row">
<div class="accordion accordionv3 p-3">
<div class="accordion-item">
<h2 class="accordion-header" id="heading_es3">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc_es3" aria-expanded="true" aria-controls="acc_es3">
Elemento Richiudibile #1
</button>
</h2>
<div id="acc_es3" class="accordion-collapse collapse show" role="region" aria-labelledby="heading_es3" data-landmark-index="2">
<div class="accordion-body d-flex flex-column flex-lg-row">
<div class="col-12 col-lg-8 pe-0 pe-lg-4">
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
</div>
<div class="col-12 col-lg-4 d-flex flex-column align-items-center pt-3 pt-lg-0">
<div class="card-wrapper w-100">
<div class="card">
<div class="card-body p-0">
<div class="it-list-wrapper">
<ul class="it-list">
<li>
<div class="list-itemv3">
<div class="it-right-zone">
<a href="#" class="" data-focus-mouse="false">Lorem ipsum dolor sit amet</a>
<span class="it-multiple">
<a href="#" aria-label="Link">
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-external-link"></use>
</svg>
</a>
</span>
</div>
</div>
</li>
<li>
<div class="list-itemv3">
<div class="it-right-zone">
<a href="#" class="" data-focus-mouse="false">Lorem ipsum dolor sit amet</a>
<span class="it-multiple"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Due colonne, testo e alert
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacus metus, volutpat in feugiat consequat, sagittis nec nisi. Vivamus orci dui, semper ut finibus ut, facilisis ac ipsum.
<div class="row">
<div class="accordion accordionv3 p-3">
<div class="accordion-item">
<h2 class="accordion-header" id="heading_es4">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc_es4" aria-expanded="true" aria-controls="acc_es4">
Elemento Richiudibile #1
</button>
</h2>
<div id="acc_es4" class="accordion-collapse collapse show" role="region" aria-labelledby="heading_es4" data-landmark-index="3">
<div class="accordion-body d-flex flex-column flex-lg-row">
<div class="col-12 col-lg-8 pe-0 pe-lg-4">
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
</div>
<div class="col-12 col-lg-4 d-flex flex-column align-items-center pt-3 pt-lg-0">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacus metus, volutpat in feugiat consequat, sagittis nec nisi. Vivamus orci dui, semper ut finibus ut, facilisis ac ipsum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Con liste link
Lorem Ipsum
Il sistema universitario, i requisiti di accesso e alcune parole del linguaggio universitario.
Lorem Ipsum
Il sistema universitario, i requisiti di accesso e alcune parole del linguaggio universitario.
Lorem Ipsum
Il sistema universitario, i requisiti di accesso e alcune parole del linguaggio universitario.
<div class="row">
<div class="accordion accordionv3 p-3">
<div class="accordion-item">
<h2 class="accordion-header" id="heading_es5">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc_es5" aria-expanded="true" aria-controls="acc_es5" data-focus-mouse="false">
Elemento Richiudibile #1
</button>
</h2>
<div id="acc_es5" class="accordion-collapse collapse show" role="region" aria-labelledby="heading_es5" data-landmark-index="4">
<div class="accordion-body d-flex flex-column flex-lg-row">
<div class="col-12 col-lg-4 p-3 card-wrapper h-auto">
<div class="card links-card">
<div class="card-body">
<h6 class="mb-0 p-3 pb-0">Lorem Ipsum</h6>
<p class="mb-0 p-3 pb-0">Il sistema universitario, i requisiti di accesso e alcune parole del linguaggio universitario.</p>
<div class="it-list-wrapper p-3">
<ul class="it-list">
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title">Lorem Ipsum</title><use aria-describedby="icon-title" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title2">Lorem Ipsum</title><use aria-describedby="icon-title2" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title3">Lorem Ipsum</title><use aria-describedby="icon-title3" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 p-3 card-wrapper h-auto">
<div class="card links-card">
<div class="card-body">
<h6 class="mb-0 p-3 pb-0">Lorem Ipsum</h6>
<p class="mb-0 p-3 pb-0">Il sistema universitario, i requisiti di accesso e alcune parole del linguaggio universitario.</p>
<div class="it-list-wrapper p-3">
<ul class="it-list">
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title">Lorem Ipsum</title><use aria-describedby="icon-title" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title2">Lorem Ipsum</title><use aria-describedby="icon-title2" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title3">Lorem Ipsum</title><use aria-describedby="icon-title3" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 p-3 card-wrapper h-auto">
<div class="card links-card">
<div class="card-body">
<h6 class="mb-0 p-3 pb-0">Lorem Ipsum</h6>
<p class="mb-0 p-3 pb-0">Il sistema universitario, i requisiti di accesso e alcune parole del linguaggio universitario.</p>
<div class="it-list-wrapper p-3">
<ul class="it-list">
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title">Lorem Ipsum</title><use aria-describedby="icon-title" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title2">Lorem Ipsum</title><use aria-describedby="icon-title2" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="it-right-zone">
<a href="#" class="" title="Lorem Ipsum" data-focus-mouse="false">
<svg class="icon"><title id="icon-title3">Lorem Ipsum</title><use aria-describedby="icon-title3" href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
<span class="text">Link a contenuto</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Con tab
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
<div class="row">
<div class="accordion accordionv3 p-3">
<div class="accordion-item">
<h2 class="accordion-header" id="heading_es6">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc_es6" aria-expanded="true" aria-controls="acc_es6" data-focus-mouse="false">
Elemento Richiudibile #1
</button>
</h2>
<div id="acc_es6" class="accordion-collapse collapse show" role="region" aria-labelledby="heading_es6" style="">
<div class="accordion-body d-flex flex-column">
<ul class="nav nav-tabs nav-tabs-icon-text" id="myTab3" role="navigation" data-landmark-guessed="">
<li class="nav-item" role="presentation">
<a class="nav-link" id="tab1c-tab" data-bs-toggle="tab" href="#tab1b" role="tab" aria-controls="tab1b" aria-selected="false" data-focus-mouse="false" tabindex="-1">Title Tab</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="tab2b-tab" data-bs-toggle="tab" href="#tab2b" role="tab" aria-controls="tab2b" aria-selected="false" data-focus-mouse="false" tabindex="-1">Title Tab</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tab4b-tab" data-bs-toggle="tab" href="#tab4b" role="tab" aria-controls="tab3b" aria-selected="true" data-focus-mouse="false">Title Tab</a>
</li>
</ul>
<div class="tab-content" id="myTab3Content">
<div class="tab-pane p-4 fade" id="tab1b" role="tabpanel" aria-labelledby="tab1c-tab"><p> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.</p></div>
<div class="tab-pane p-4 fade" id="tab2b" role="tabpanel" aria-labelledby="tab2b-tab"><p> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.</p></div>
<div class="tab-pane p-4 fade active show" id="tab4b" role="tabpanel" aria-labelledby="tab4b-tab"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.</div>
</div>
</div>
</div>
</div>
</div>
</div>Accessibilità
Assicurati di aggiungere aria-expanded all’elemento di controllo. Questo attributo trasmette esplicitamente lo stato corrente dell’elemento comprimibile legato al controllo a screen reader e tecnologie assistive simili. Se l’elemento comprimibile è chiuso in modo predefinito, l’attributo sull’elemento di controllo dovrebbe avere il valore aria-expanded="false". Se imposti l’elemento comprimibile aperto in modo predefinito utilizzando la classe show, sul controllo invece imposta aria-expanded="true". Il plugin attiva/disattiva automaticamente questo attributo sul controllo in base all’apertura o alla chiusura dell’elemento richiudibile (via JavaScript, o perché l’utente ha attivato un altro elemento di controllo anch’esso legato allo stesso elemento richiudibile). Se il componente HTML dell’elemento di controllo non è un bottone (ad esempio un <a> o <div>), l’attributo role="button" dovrebbe essere aggiunto al componente.
Inoltre, se il tuo elemento di controllo si riferisce a un singolo elemento richiudibile – cioè l’attributo data-bs-target sta puntando a un selettore id – potresti aggiungere un ulteriore attributo aria-controls all’elemento di controllo, contenente l’id dell’elemento richiudibile. I moderni screen reader e tecnologie assistive simili fanno uso di questo attributo per fornire agli utenti scorciatoie aggiuntive per navigare direttamente all’elemento richiudibile stesso.
Il componente Accordion si basa su quello nativo di Bootstrap 5.2.3, a sua volta basato sul componente Collapse.
Bootstrap Italia migliora l’accessibilità dell’Accordion implementando la navigazione via tastiera degli header con le frecce cursore (su/giù) e con i tasti Home (primo elemento) ed End (ultimo elemento).