Accordion

L'accordion è un componente utilizzato per ottimizzare la visualizzazione dei contenuti all’interno di una pagina. Si tratta di elementi richiudibili, in gergo definiti collassabili o collapse, che possono essere attivati indipendentemente l'uno dall’altro. In questo modo è possibile visualizzare dei contenuti in pagina solo quando esplicitamente richiesti.
Qui potrai trovare la User Interface, lo snippet e le modalità di utilizzo per gli accordion per l'Ecosistema digitale Turismo Cultura.

Filtro accordion con icona

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Filtro accordion senza icona

                                            
<!-- accordion con icona -->
<div id="dms-accordion-1" class="dms-accordion" role="tablist">
    <div class="card">
        <div class="card-header border-0" id="heading1">
            <a href="#" class="btn dms-link d-flex justify-content-between align-items-center"
                data-toggle="collapse" data-target="#accordion1" aria-expanded="true"
                aria-controls="accordion1">
                <div class="d-flex align-items-center">
                    <i class="dms-wk-icon-filter"></i>
                    <span>Filtro accordion con icona</span>
                </div>
                <i class="dms-wk-icon-arrow-up"></i>
            </a>
        </div>
        <div id="accordion1" class="collapse show" role="tabpanel"
            aria-labelledby="heading1" data-parent="#dms-accordion-1">
            <div class="card-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
        </div>
    </div>
</div>


<!-- accordion senza icona -->
<div id="dms-accordion-2" class="dms-accordion" role="tablist">
    <div class="card">
        <div class="card-header" id="heading2">
            <a href="#" class="btn dms-link d-flex justify-content-between align-items-center"
                data-toggle="collapse" data-target="#accordion2" aria-expanded="true"
                aria-controls="accordion2">
                <div class="d-flex align-items-center">
                    <span>Filtro accordion senza icona</span>
                </div>
                <i class="dms-wk-icon-arrow-up"></i>
            </a>
        </div>
        <div id="accordion2" class="collapse show" role="tabpanel"
            aria-labelledby="heading2" data-parent="#dms-accordion-2">
            <div class="card-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
        </div>
    </div>
</div>

Utilizzo

E' obbligatorio:

l'init del componente. Questo può avvenire lato html, come nello snippet, aggiungendo gli attributi data-toggle="collapse" e data-target all'elemento per assegnare automaticamente uno o più elementi collassabili, oppure tramite javascript.
assicurarsi di aver aggiunto aria-expanded all'elemento di controllo, ai fini dell'accessibilità. Se l'elemento è chiuso di default, questo deve essere settato a false.
duplicare l'id di ogni elemento in caso di accordion multipli
il contenuto da mostrare/nascondere dovrà esser inserito all'interno dell'elementocard-body

Per visualizzare un accordion già espanso all'apertura della pagina, rimuovere la classe collapsed dall'elemento <a href="#" class="btn btn-link d-flex justify-content-between align-items-center collapsed" ed aggiungere la classe show.

Per ulteriori informazioni visita la pagina Collapse di Bootstrap.