Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Accordion

Accordion

Il componente Accordion permette di gestire dati e informazioni all’interno della stessa schermata.
Si tratta di un serie di pannelli apribili nei quali è possibile inserire informazioni di varia natura, sia testuali che numeriche.
Generalmente si consiglia di utilizzare un massimo di 5/6 righe di accordion su mobile e 10/15 su desktop.

Versione collapse

Nella versione collapse dell’accordion è possibile aprire più di un pannello contemporaneamente.
L’esempio seguente mostra l’accordion nel suo stato base, con tutti i pannelli chiusi.

minimo 8 caratteri, maiuscole, numeri e caratteri speciali.

AC-123-0002658

Mezzi utilizzati 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

  <div class="accordion" id="collapseEx">
    <div class="accordion-item">
      <h2 class="accordion-header" id="collapseEx-header1">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#collapseEx-content1" aria-expanded="false" aria-controls="collapseEx-content1">
        Account
        </button>
      </h2>
      <div id="collapseEx-content1" class="accordion-collapse collapse"
       
        role="region" aria-labelledby="#collapseEx-header1">
        <div class="accordion-body">
          
            include esempi-lombardia/account_posta.html
          
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="collapseEx-header2">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#collapseEx-content2" aria-expanded="false" aria-controls="collapseEx-content2">
        Indirizzo
        </button>
      </h2>
      <div id="collapseEx-content2" class="accordion-collapse collapse"
       
        role="region" aria-labelledby="#collapseEx-header2">
        <div class="accordion-body">
          
            include esempi-lombardia/indirizzo.html
          
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="collapseEx-header3">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#collapseEx-content3" aria-expanded="false" aria-controls="collapseEx-content3">
        Trasporti
        </button>
      </h2>
      <div id="collapseEx-content3" class="accordion-collapse collapse"
       
        role="region" aria-labelledby="#collapseEx-header3">
        <div class="accordion-body">
          
            include esempi-lombardia/toggles.html
          
        </div>
      </div>
    </div>
  </div>

Versione according

Con la versione according è possibile aprire un solo pannello alla volta.
Questo per rendere chiaramente circoscritto il contenuto in oggetto.

Il comportamento si ottiene aggiungendo data-bs-parent=“#id-div-contenitore-di-tutti-gli-item”
in ogni div contenitore del corpo di un item.

minimo 8 caratteri, maiuscole, numeri e caratteri speciali.

AC-123-0002658

Mezzi utilizzati 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

  <div class="accordion" id="accordionEx1">
    <div class="accordion-item">
      <h2 class="accordion-header" id="accordionEx1-header1">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#accordionEx1-content1" aria-expanded="false" aria-controls="accordionEx1-content1">
        Account
        </button>
      </h2>
      <div id="accordionEx1-content1" class="accordion-collapse collapse"
        data-bs-parent="#accordionEx1" 
        role="region" aria-labelledby="#accordionEx1-header1">
        <div class="accordion-body">
          
            include esempi-lombardia/account_posta.html
          
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="accordionEx1-header2">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#accordionEx1-content2" aria-expanded="false" aria-controls="accordionEx1-content2">
        Indirizzo
        </button>
      </h2>
      <div id="accordionEx1-content2" class="accordion-collapse collapse"
        data-bs-parent="#accordionEx1" 
        role="region" aria-labelledby="#accordionEx1-header2">
        <div class="accordion-body">
          
            include esempi-lombardia/indirizzo.html
          
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="accordionEx1-header3">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#accordionEx1-content3" aria-expanded="false" aria-controls="accordionEx1-content3">
        Trasporti
        </button>
      </h2>
      <div id="accordionEx1-content3" class="accordion-collapse collapse"
        data-bs-parent="#accordionEx1" 
        role="region" aria-labelledby="#accordionEx1-header3">
        <div class="accordion-body">
          
            include esempi-lombardia/toggles.html
          
        </div>
      </div>
    </div>
  </div>

Versione nested

La versione nested dell’accordion permette di gestire in maniera ottimale la gerarchia delle informazioni inserite all’interno del componente, nel caso in cui si debbano inserire pannelli secondari.
In questo caso, i pannelli secondari appariranno nidificati all’interno di quelli principali.

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.

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. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

  <div class="accordion" id="accordionExample2">
    <div class="accordion-item">
      <h2 class="accordion-header" id="heading1a">
        <button class="accordion-button" type="button" data-bs-toggle="collapse"
          data-bs-target="#collapse1a" aria-expanded="true" aria-controls="collapse1a">
          Elemento Accordion #1
        </button>
      </h2>
      <div id="collapse1a" class="accordion-collapse collapse show"
        data-bs-parent="#accordionExample2" role="region" aria-labelledby="heading1a">
        <div class="accordion-body">
          <div class="accordion" id="accordionExample2N">
            <div class="accordion-item">
              <h3 class="accordion-header" id="heading1n">
                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse1n" aria-expanded="true" aria-controls="collapse1n">
                  Elemento Accordion annidato #1
                </button>
              </h3>
              <div id="collapse1n" class="accordion-collapse collapse show"
                data-bs-parent="#accordionExample2N" role="region" aria-labelledby="heading1n">
                <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>
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="heading2a">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#collapse2a" aria-expanded="false" aria-controls="collapse2a">
          Elemento Accordion #2
        </button>
      </h2>
      <div id="collapse2a" class="accordion-collapse collapse"
        data-bs-parent="#accordionExample2" role="region" aria-labelledby="heading2a">
        <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>

Item com allegato

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.
Text

Documento PDF - 100kB

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div class="accordion-item">
  <h2 class="accordion-header" id="heading1all">
    <button class="accordion-button" type="button" data-bs-toggle="collapse"
      data-bs-target="#collapse1all" aria-expanded="true" aria-controls="collapse1all">
    Titolo elemento
    </button>
  </h2>
  <div id="collapse1all" class="accordion-collapse collapse show"
    data-bs-parent="#accordionExampleLft" role="region" aria-labelledby="heading1all">
    <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 class="it25-radius-smoother d-flex justify-content-between align-items-center primary-bg-0 mt-3 p-4">
        <div>
          <a class="h5 fw-normal" href="#">Text</a>
          <p class="font-monospace grey-color-600 mt-2 mb-0">Documento PDF - 100kB</p>
        </div>
        <div>
          <svg class="icon"><use href="/dist/svg/sprites.svg#it-files"></use></svg>
        </div>
      </div>
    </div>
  </div>
</div>