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 btn-block text-left" 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 Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
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 btn-block text-left 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 Some placeholder content for the second accordion panel. This panel is hidden by default.
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 btn-block text-left 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 And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
42 </div>
43 </div>
44 </div>
45</div>