Componente
Accordion
Elementi richiudibili su <details>/<summary> nativi con daisyUI collapse: apertura, chiusura e tastiera funzionano senza JavaScript.
- Riferimento
<it-accordion>, <it-accordion-item>- Classi
ita-accordionita-accordion-activeita-accordion-hover- Basato su (daisyUI)
collapsecollapse-arrowcollapse-titlecollapse-content- Estensioni
it-plus-minus- Solo CSS
- La modalità esclusiva usa l'attributo name condiviso di <details>; aperto di default = attributo open. Le frecce su/giù fra intestazioni del web component non sono replicate (Tab funziona).
- Storybook
- Apri le storie di Accordion
Esempio base
Elemento richiudibile #1
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.
Elemento richiudibile #2
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.
Elemento richiudibile #3
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.
Mostra il codice HTMLNascondi il codice HTML
<div class="ita-accordion">
<details class="collapse collapse-arrow" open>
<summary class="collapse-title"><h2>Elemento richiudibile #1</h2></summary>
<div class="collapse-content"><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>
</details>
<details class="collapse collapse-arrow">
<summary class="collapse-title"><h2>Elemento richiudibile #2</h2></summary>
<div class="collapse-content"><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>
</details>
<details class="collapse collapse-arrow">
<summary class="collapse-title"><h2>Elemento richiudibile #3</h2></summary>
<div class="collapse-content"><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>
</details>
</div>Modalità esclusiva
Aprendo un elemento si chiudono gli altri.
Elemento richiudibile #1
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.
Elemento richiudibile #2
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.
Elemento richiudibile #3
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.
Mostra il codice HTMLNascondi il codice HTML
<div class="ita-accordion">
<details class="collapse collapse-arrow" name="esclusivo" open>
<summary class="collapse-title"><h2>Elemento richiudibile #1</h2></summary>
<div class="collapse-content"><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>
</details>
<details class="collapse collapse-arrow" name="esclusivo">
<summary class="collapse-title"><h2>Elemento richiudibile #2</h2></summary>
<div class="collapse-content"><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>
</details>
<details class="collapse collapse-arrow" name="esclusivo">
<summary class="collapse-title"><h2>Elemento richiudibile #3</h2></summary>
<div class="collapse-content"><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>
</details>
</div>Accordion annidati
Elemento richiudibile #1
Elemento richiudibile annidato #1
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.
Elemento richiudibile annidato #2
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.
Elemento richiudibile annidato #3
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.
Elemento richiudibile #2
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.
Mostra il codice HTMLNascondi il codice HTML
<div class="ita-accordion">
<details class="collapse collapse-arrow" open>
<summary class="collapse-title"><h2>Elemento richiudibile #1</h2></summary>
<div class="collapse-content"><div class="ita-accordion">
<details class="collapse collapse-arrow">
<summary class="collapse-title"><h3>Elemento richiudibile annidato #1</h3></summary>
<div class="collapse-content"><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>
</details>
<details class="collapse collapse-arrow">
<summary class="collapse-title"><h3>Elemento richiudibile annidato #2</h3></summary>
<div class="collapse-content"><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>
</details>
<details class="collapse collapse-arrow">
<summary class="collapse-title"><h3>Elemento richiudibile annidato #3</h3></summary>
<div class="collapse-content"><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>
</details>
</div></div>
</details>
<details class="collapse collapse-arrow">
<summary class="collapse-title"><h2>Elemento richiudibile #2</h2></summary>
<div class="collapse-content"><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>
</details>
</div>Sfondo degli elementi attivi
Elemento richiudibile #1
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.
Elemento richiudibile #2
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.
Elemento richiudibile #3
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.
Mostra il codice HTMLNascondi il codice HTML
<div class="ita-accordion ita-accordion-active">
<details class="collapse collapse-arrow" open>
<summary class="collapse-title"><h2>Elemento richiudibile #1</h2></summary>
<div class="collapse-content"><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>
</details>
<details class="collapse collapse-arrow">
<summary class="collapse-title"><h2>Elemento richiudibile #2</h2></summary>
<div class="collapse-content"><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>
</details>
<details class="collapse collapse-arrow">
<summary class="collapse-title"><h2>Elemento richiudibile #3</h2></summary>
<div class="collapse-content"><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>
</details>
</div>Hover degli header
Elemento richiudibile #1
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.
Elemento richiudibile #2
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.
Elemento richiudibile #3
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.
Mostra il codice HTMLNascondi il codice HTML
<div class="ita-accordion ita-accordion-hover">
<details class="collapse collapse-arrow" open>
<summary class="collapse-title"><h2>Elemento richiudibile #1</h2></summary>
<div class="collapse-content"><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>
</details>
<details class="collapse collapse-arrow">
<summary class="collapse-title"><h2>Elemento richiudibile #2</h2></summary>
<div class="collapse-content"><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>
</details>
<details class="collapse collapse-arrow">
<summary class="collapse-title"><h2>Elemento richiudibile #3</h2></summary>
<div class="collapse-content"><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>
</details>
</div>Icona a sinistra
Elemento richiudibile #1
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.
Elemento richiudibile #2
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.
Elemento richiudibile #3
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.
Mostra il codice HTMLNascondi il codice HTML
<div class="ita-accordion">
<details class="collapse" open>
<summary class="collapse-title"><span class="it-plus-minus" aria-hidden="true"></span><h2>Elemento richiudibile #1</h2></summary>
<div class="collapse-content"><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>
</details>
<details class="collapse">
<summary class="collapse-title"><span class="it-plus-minus" aria-hidden="true"></span><h2>Elemento richiudibile #2</h2></summary>
<div class="collapse-content"><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>
</details>
<details class="collapse">
<summary class="collapse-title"><span class="it-plus-minus" aria-hidden="true"></span><h2>Elemento richiudibile #3</h2></summary>
<div class="collapse-content"><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>
</details>
</div>