bootstrap accordion snippet

Solutions on MaxInterview for bootstrap accordion snippet by the best coders in the world

showing results for - "bootstrap accordion snippet"
Lennard
16 Nov 2019
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>