Componente per la visualizzazione di sezioni espandibili e richiudibili al click.
Accordion
Il Web Toolkit mette a disposizione un componente per la visualizzazione di sezioni espandibili e richiudibili al click denominato Accordion.
Odit quos doloribus nemo autem excepturi dolorem explicabo.
Delectus dolor culpa cum. Veniam nobis impedit expedita eos eius. Autem ut optio corporis alias. Modi perferendis dolor aut iste eligendi. Delectus qui natus saepe voluptas velit aliquid qui reiciendis velit. Qui qui et consequuntur et possimus sed.
Tempore accusamus eaque rerum est.
Voluptate blanditiis omnis. Et doloremque et. Debitis suscipit voluptatem est aut consequatur suscipit eos. Nisi sit voluptas quod. Vitae eligendi quasi culpa ut omnis pariatur nihil autem. Ipsam non eum sit omnis ut rerum.
Ut adipisci iure tempore ullam laborum.
Sed rerum asperiores magni et facilis illo recusandae quia similique. Eos non at. Est sit voluptates. Esse corrupti cupiditate possimus hic quasi consequatur et.
Consequuntur est et quo ullam aut omnis aut et.
Ipsam ad et voluptates quaerat. Veritatis sed voluptatem sit tempore recusandae accusantium et vero. At laborum eveniet quaerat expedita nihil doloremque assumenda aperiam alias.
Et vitae qui ullam quis alias quibusdam quos.
At itaque ab. Enim quia libero. Eum accusantium et blanditiis hic. Ratione aut libero sit id quas ut sit dicta. Et quis quo debitis asperiores cumque temporibus est sunt. Autem et dicta amet placeat.
La costruzione può avvenire sia direttamente tramite codice che tramite l'editor TinyMCE.
La costruzione dell'Accordion tramite codice è abbastanza laboriosa
<div class="Accordion Accordion--default fr-accordion js-fr-accordion" id="accordion-1" aria-multislectable="false">
<h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-0">
<span class="Accordion-link">Odit quos doloribus nemo autem excepturi dolorem explicabo.</span>
</h2>
<div id="accordion-panel-0" class="Accordion-panel fr-accordion__panel js-fr-accordion__panel">
<p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Delectus dolor culpa cum. Veniam nobis impedit expedita eos eius. Autem ut optio corporis alias. Modi perferendis dolor aut iste eligendi. Delectus qui natus saepe voluptas velit aliquid qui reiciendis velit. Qui qui et consequuntur et possimus
sed.</p>
</div>
<h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-1" aria-selected="true" aria-expanded="true">
<span class="Accordion-link">Tempore accusamus eaque rerum est.</span>
</h2>
<div id="accordion-panel-1" class="Accordion-panel fr-accordion__panel js-fr-accordion__panel" aria-hidden="false">
<p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Voluptate blanditiis omnis. Et doloremque et. Debitis suscipit voluptatem est aut consequatur suscipit eos. Nisi sit voluptas quod. Vitae eligendi quasi culpa ut omnis pariatur nihil autem. Ipsam non eum sit omnis ut rerum.</p>
</div>
<h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-2">
<span class="Accordion-link">Ut adipisci iure tempore ullam laborum.</span>
</h2>
<div id="accordion-panel-2" class="Accordion-panel fr-accordion__panel js-fr-accordion__panel">
<p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Sed rerum asperiores magni et facilis illo recusandae quia similique. Eos non at. Est sit voluptates. Esse corrupti cupiditate possimus hic quasi consequatur et.</p>
</div>
<h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-3">
<span class="Accordion-link">Consequuntur est et quo ullam aut omnis aut et.</span>
</h2>
<div id="accordion-panel-3" class="Accordion-panel fr-accordion__panel js-fr-accordion__panel">
<p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Ipsam ad et voluptates quaerat. Veritatis sed voluptatem sit tempore recusandae accusantium et vero. At laborum eveniet quaerat expedita nihil doloremque assumenda aperiam alias.</p>
</div>
<h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-4">
<span class="Accordion-link">Et vitae qui ullam quis alias quibusdam quos.</span>
</h2>
<div id="accordion-panel-4" class="Accordion-panel fr-accordion__panel js-fr-accordion__panel">
<p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">At itaque ab. Enim quia libero. Eum accusantium et blanditiis hic. Ratione aut libero sit id quas ut sit dicta. Et quis quo debitis asperiores cumque temporibus est sunt. Autem et dicta amet placeat.</p>
</div>
</div>
Di default l'accordion permette l'apertura di più pannelli contemporaneamente.
A partire dalla versione 3.8.0.11 del template italiaPA è possibile abilitare l'apertura di un solo pannello per volta aggiungendo l'attributo aria-multiselectable="false".
È inoltre possibile definire lo stato iniziale del singolo pannello. Per averlo aperto bisogna aggiungere i seguenti attributi:
all'header aria-selected="true" e aria-expanded="true"
al panel aria-hidden="false"
Il template ItaliaPA permette di inserire l'accordion mediante definition list DL
- Odit quos doloribus nemo autem excepturi dolorem explicabo.
- Delectus dolor culpa cum. Veniam nobis impedit expedita eos eius. Autem ut optio corporis alias. Modi perferendis dolor aut iste eligendi. Delectus qui natus saepe voluptas velit aliquid qui reiciendis velit. Qui qui et consequuntur et possimus sed.
- Tempore accusamus eaque rerum est.
- Voluptate blanditiis omnis. Et doloremque et. Debitis suscipit voluptatem est aut consequatur suscipit eos. Nisi sit voluptas quod. Vitae eligendi quasi culpa ut omnis pariatur nihil autem. Ipsam non eum sit omnis ut rerum.
- Ut adipisci iure tempore ullam laborum.
- Sed rerum asperiores magni et facilis illo recusandae quia similique. Eos non at. Est sit voluptates. Esse corrupti cupiditate possimus hic quasi consequatur et.
- Consequuntur est et quo ullam aut omnis aut et.
- Ipsam ad et voluptates quaerat. Veritatis sed voluptatem sit tempore recusandae accusantium et vero. At laborum eveniet quaerat expedita nihil doloremque assumenda aperiam alias.
- Et vitae qui ullam quis alias quibusdam quos.
- At itaque ab. Enim quia libero. Eum accusantium et blanditiis hic. Ratione aut libero sit id quas ut sit dicta. Et quis quo debitis asperiores cumque temporibus est sunt. Autem et dicta amet placeat.
Utilizzando la definition list il codice si semplifica di molto.
<dl class="Accordion Accordion--default" aria-multislectable="false">
<dt>Odit quos doloribus nemo autem excepturi dolorem explicabo.</dt>
<dd>Delectus dolor culpa cum. Veniam nobis impedit expedita eos eius. Autem ut optio corporis alias. Modi perferendis dolor aut iste eligendi. Delectus qui natus saepe voluptas velit aliquid qui reiciendis velit. Qui qui et consequuntur et possimus sed.</dd>
<dt aria-selected="true" aria-expanded="true">Tempore accusamus eaque rerum est.</dt>
<dd>Voluptate blanditiis omnis. Et doloremque et. Debitis suscipit voluptatem est aut consequatur suscipit eos. Nisi sit voluptas quod. Vitae eligendi quasi culpa ut omnis pariatur nihil autem. Ipsam non eum sit omnis ut rerum.</dd>
<dt>Ut adipisci iure tempore ullam laborum.</dt>
<dd>Sed rerum asperiores magni et facilis illo recusandae quia similique. Eos non at. Est sit voluptates. Esse corrupti cupiditate possimus hic quasi consequatur et.</dd>
<dt>Consequuntur est et quo ullam aut omnis aut et.</dt>
<dd>Ipsam ad et voluptates quaerat. Veritatis sed voluptatem sit tempore recusandae accusantium et vero. At laborum eveniet quaerat expedita nihil doloremque assumenda aperiam alias.</dd>
<dt>Et vitae qui ullam quis alias quibusdam quos.</dt>
<dd>At itaque ab. Enim quia libero. Eum accusantium et blanditiis hic. Ratione aut libero sit id quas ut sit dicta. Et quis quo debitis asperiores cumque temporibus est sunt. Autem et dicta amet placeat.</dd>
</dl>
Di default l'accordion permette l'apertura di più pannelli contemporaneamente.
A partire dalla versione 3.8.0.11 del template italiaPA è possibile abilitare l'apertura di un solo pannello per volta aggiungendo l'attributo aria-multiselectable="false".
È inoltre possibile definire lo stato iniziale del singolo pannello. Per averlo aperto bisogna aggiungere i seguenti attributi:
all'header aria-selected="true" e aria-expanded="true"
al panel aria-hidden="false"
Ultima opzione è l'utilizzo del pulsante Definition List direttamente dall'editor TinyMCE.
In questo caso non bisogna inserire il codice manualmente ma se ne occupa direttamente l'editor. Per agevolare l'inserimento dei contenuti l'editor mostra una rappresentazione grafica della struttura dell'Accordion.
Configurazione
Il pulsante Definition list può essere attivato direttamente dal plugin Editor - TinyMCE, previa installazione del plugin System - TinyMCE for ItaliaPA Template, attivando il plugin personalizzato ipa e selezionando il pulsante personalizzato ipa-deflist.
Requisiti
Plugin System - TinyMCE for ItaliaPA 3.8.0.11 o successivo
Template ItaliaPA 3.8.0.11 o successivo