Collapse

Search…
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!
Components - Previous
Card Group
Next - Components
Dropdowns
Last modified 1yr ago
Copy link
Contents
Basic Collapse
Multiple Target Collapse
Accordion