accordion bootstrap

1<div id="accordion">
2  <div class="card">
3    <div class="card-header" id="headingOne">
4      <h5 class="mb-0">
5        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
6          Collapsible Group Item #1
7        </button>
8      </h5>
9    </div>
10
11    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
12      <div class="card-body">
13        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
14      </div>
15    </div>
16  </div>
17  <div class="card">
18    <div class="card-header" id="headingTwo">
19      <h5 class="mb-0">
20        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
21          Collapsible Group Item #2
22        </button>
23      </h5>
24    </div>
25    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
26      <div class="card-body">
27        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
28      </div>
29    </div>
30  </div>
31  <div class="card">
32    <div class="card-header" id="headingThree">
33      <h5 class="mb-0">
34        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
35          Collapsible Group Item #3
36        </button>
37      </h5>
38    </div>
39    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
40      <div class="card-body">
41        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
42      </div>
43    </div>
44  </div>
45</div>

1<div class="accordion" id="accordionExample">
2  <div class="card">
3    <div class="card-header" id="headingOne">
4      <h2 class="mb-0">
5        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
6          Collapsible Group Item #1
7        </button>
8      </h2>
9    </div>
10
11    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
12      <div class="card-body">
13        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
14      </div>
15    </div>
16  </div>
17  <div class="card">
18    <div class="card-header" id="headingTwo">
19      <h2 class="mb-0">
20        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
21          Collapsible Group Item #2
22        </button>
23      </h2>
24    </div>
25    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
26      <div class="card-body">
27        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
28      </div>
29    </div>
30  </div>
31  <div class="card">
32    <div class="card-header" id="headingThree">
33      <h2 class="mb-0">
34        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
35          Collapsible Group Item #3
36        </button>
37      </h2>
38    </div>
39    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
40      <div class="card-body">
41        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
42      </div>
43    </div>
44  </div>
45</div>

1<div class="accordion" id="accordionExample">
2  <div class="card">
3    <div class="card-header" id="headingOne">
4      <h5 class="mb-0">
5        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
6          Collapsible Group Item #1
7        </button>
8      </h5>
9    </div>
10
11    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
12      <div class="card-body">
13        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
14      </div>
15    </div>
16  </div>
17  <div class="card">
18    <div class="card-header" id="headingTwo">
19      <h5 class="mb-0">
20        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
21          Collapsible Group Item #2
22        </button>
23      </h5>
24    </div>
25    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
26      <div class="card-body">
27        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
28      </div>
29    </div>
30  </div>
31  <div class="card">
32    <div class="card-header" id="headingThree">
33      <h5 class="mb-0">
34        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
35          Collapsible Group Item #3
36        </button>
37      </h5>
38    </div>
39    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
40      <div class="card-body">
41        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
42      </div>
43    </div>
44  </div>
45</div>

1<div class="accordion" id="accordionExample">
2   <div class="accordion-item">
3      <h2 class="accordion-header" id="headingOne">
4         <button
5            class="accordion-button"
6            type="button"
7            data-bs-toggle="collapse"
8            data-bs-target="#collapseOne"
9            aria-expanded="true"
10            aria-controls="collapseOne"
11         >
12            Accordion Item #1
13         </button>
14      </h2>
15      <div
16         id="collapseOne"
17         class="accordion-collapse collapse show"
18         aria-labelledby="headingOne"
19         data-bs-parent="#accordionExample"
20      >
21         <div class="accordion-body">
22            <strong>This is the first item's accordion body.</strong> It is
23            hidden by default, until the collapse plugin adds the appropriate
24            classes that we use to style each element. These classes control the
25            overall appearance, as well as the showing and hiding via CSS
26            transitions. You can modify any of this with custom CSS or
27            overriding our default variables. It's also worth noting that just
28            about any HTML can go within the <code>.accordion-body</code>,
29            though the transition does limit overflow.
30         </div>
31      </div>
32   </div>
33   <div class="accordion-item">
34      <h2 class="accordion-header" id="headingTwo">
35         <button
36            class="accordion-button collapsed"
37            type="button"
38            data-bs-toggle="collapse"
39            data-bs-target="#collapseTwo"
40            aria-expanded="false"
41            aria-controls="collapseTwo"
42         >
43            Accordion Item #2
44         </button>
45      </h2>
46      <div
47         id="collapseTwo"
48         class="accordion-collapse collapse"
49         aria-labelledby="headingTwo"
50         data-bs-parent="#accordionExample"
51      >
52         <div class="accordion-body">
53            <strong>This is the second item's accordion body.</strong> It is
54            hidden by default, until the collapse plugin adds the appropriate
55            classes that we use to style each element. These classes control the
56            overall appearance, as well as the showing and hiding via CSS
57            transitions. You can modify any of this with custom CSS or
58            overriding our default variables. It's also worth noting that just
59            about any HTML can go within the <code>.accordion-body</code>,
60            though the transition does limit overflow.
61         </div>
62      </div>
63   </div>
64   <div class="accordion-item">
65      <h2 class="accordion-header" id="headingThree">
66         <button
67            class="accordion-button collapsed"
68            type="button"
69            data-bs-toggle="collapse"
70            data-bs-target="#collapseThree"
71            aria-expanded="false"
72            aria-controls="collapseThree"
73         >
74            Accordion Item #3
75         </button>
76      </h2>
77      <div
78         id="collapseThree"
79         class="accordion-collapse collapse"
80         aria-labelledby="headingThree"
81         data-bs-parent="#accordionExample"
82      >
83         <div class="accordion-body">
84            <strong>This is the third item's accordion body.</strong> It is
85            hidden by default, until the collapse plugin adds the appropriate
86            classes that we use to style each element. These classes control the
87            overall appearance, as well as the showing and hiding via CSS
88            transitions. You can modify any of this with custom CSS or
89            overriding our default variables. It's also worth noting that just
90            about any HTML can go within the <code>.accordion-body</code>,
91            though the transition does limit overflow.
92         </div>
93      </div>
94   </div>
95</div>

1Notice that each panel has a data-parent which targets the parent div with the 
2ID #panels.
3
4<div class="panel-group" id="panels">
5    <div class="panel panel-default">
6        <div class="collapsed" data-toggle="collapse" data-parent="#panels" data-target="#firstPanel">
7             <h4>First header</h4>    
8        </div>
9        <div id="firstPanel" class="panel-collapse collapse">
10            <div>Content.</div>
11        </div>
12    </div>
13    <div class="panel panel-default">
14        <div class="collapsed" data-toggle="collapse" data-parent="#panels" data-target="#secondPanel">
15             <h4>Second header</h4>
16
17        </div>
18        <div id="secondPanel" class="panel-collapse collapse">
19            <div>Other content.</div>
20        </div>
21    </div>
22</div>