Collapse

Basic Collapse

Basic
Source Code
1
<p>
2
<a class="btn btn-primary mr-2 mb-2" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="true" aria-controls="collapseExample">
3
Link with href
4
</a>
5
<button class="btn btn-primary mr-2 mb-2" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample">
6
Button with data-target
7
</button>
8
</p>
9
<div class="collapse show" id="collapseExample" style="">
10
<div class="card card-body">
11
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
12
richardson ad squid.
13
Nihil
14
anim
15
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
16
proident.
17
</div>
18
</div>
Copied!

Multiple Target Collapse

Multi
Source Code
1
<p>
2
<a class="btn btn-primary mr-2 mb-2" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="true" aria-controls="multiCollapseExample1">First Element</a>
3
<button class="btn btn-primary mr-2 mb-2" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="true" aria-controls="multiCollapseExample2">Second Element
4
</button>
5
<button class="btn btn-primary mr-2 mb-2" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="true" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both
6
elements
7
</button>
8
</p>
9
<div class="row">
10
<div class="col">
11
<div class="multi-collapse collapse show" id="multiCollapseExample1" style="">
12
<div class="card card-body">
13
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
14
terry richardson ad squid.
15
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
16
nesciunt sapiente ea
17
proident.
18
</div>
19
</div>
20
</div>
21
<div class="col">
22
<div class="multi-collapse collapse show" id="multiCollapseExample2" style="">
23
<div class="card card-body">
24
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
25
terry richardson ad squid.
26
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
27
nesciunt sapiente ea
28
proident.
29
</div>
30
</div>
31
</div>
32
</div>
Copied!

Accordion

Accordion
Source Code
1
<!-- Accordion -->
2
<div class="accordion" id="accordion-example">
3
<div class="card">
4
<div class="card-header" id="headingOne">
5
<h5 class="mb-0">
6
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-one" aria-expanded="true" aria-controls="collapse-one">
7
Collapsible Group Item #1
8
</button>
9
</h5>
10
</div>
11
12
<div id="collapse-one" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion-example" style="">
13
<div class="card-body">
14
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
15
terry richardson ad squid.
16
3
17
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
18
truck quinoa nesciunt
19
laborum
20
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
21
squid single-origin coffee
22
nulla
23
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
24
labore wes anderson cred
25
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
26
Leggings occaecat craft
27
beer
28
farm-to-table, raw denim aesthetic synth nesciunt you probably
29
haven't heard of them accusamus
30
labore sustainable VHS.
31
</div>
32
</div>
33
</div>
34
<div class="card">
35
<div class="card-header" id="headingTwo">
36
<h5 class="mb-0">
37
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-two" aria-expanded="false" aria-controls="collapse-two">
38
Collapsible Group Item #2
39
</button>
40
</h5>
41
</div>
42
<div id="collapse-two" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion-example" style="">
43
<div class="card-body">
44
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
45
terry richardson ad squid.
46
3
47
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
48
truck quinoa nesciunt
49
laborum
50
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
51
squid single-origin coffee
52
nulla
53
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
54
labore wes anderson cred
55
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
56
Leggings occaecat craft
57
beer
58
farm-to-table, raw denim aesthetic synth nesciunt you probably
59
haven't heard of them accusamus
60
labore sustainable VHS.
61
</div>
62
</div>
63
</div>
64
<div class="card">
65
<div class="card-header" id="headingThree">
66
<h5 class="mb-0">
67
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-three" aria-expanded="false" aria-controls="collapse-three">
68
Collapsible Group Item #3
69
</button>
70
</h5>
71
</div>
72
<div id="collapse-three" class="collapse" aria-labelledby="headingThree" data-parent="#accordion-example" style="">
73
<div class="card-body">
74
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
75
terry richardson ad squid.
76
3
77
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
78
truck quinoa nesciunt
79
laborum
80
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
81
squid single-origin coffee
82
nulla
83
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
84
labore wes anderson cred
85
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
86
Leggings occaecat craft
87
beer
88
farm-to-table, raw denim aesthetic synth nesciunt you probably
89
haven't heard of them accusamus
90
labore sustainable VHS.
91
</div>
92
</div>
93
</div>
94
</div>
95
<!-- /accordion -->
Copied!
Last modified 1yr ago