Collapse

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ipsam. Alias unde praesentium dolorem repellat quasi dolore, ex rerum odio!

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">Link with href</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">Button with data-target</button>

<div class="collapse" id="collapseExample">
    <div class="card bg-success text-white mt-4">
        <div class="card-body">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ipsam. Alias unde praesentium dolorem repellat quasi dolore, ex rerum odio!</p>
        </div>
    </div>
</div>

Multiple targets

Toggle first element

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ipsam. Alias unde praesentium dolorem repellat quasi dolore, ex rerum odio!

<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" >Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse">Toggle both elements</button>

<div class="row mb-0">
    <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample1">
            <div class="card bg-success text-white mt-4 mb-0">
                <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ipsam. Alias unde praesentium dolorem repellat quasi dolore, ex rerum odio!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample2">
            <div class="card bg-warning text-white mt-4 mb-0">
                <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ipsam. Alias unde praesentium dolorem repellat quasi dolore, ex rerum odio!</p>
                </div>
            </div>
        </div>
    </div>
</div>

Accordion example

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam facere nesciunt, sed alias laboriosam quos. Corporis recusandae et ab tempore aut non, sit esse enim, odit ullam ad repellendus magnam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur exercitationem unde sunt molestias, asperiores quia nam id illum aut vitae velit veniam laboriosam nisi, porro fugit reiciendis adipisci modi? Nemo.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, possimus? Iure numquam, beatae laboriosam autem, ad nobis non rem odit quo maiores mollitia excepturi repellat reprehenderit laudantium, odio iste est?

<div class="accordion" id="accordionExample">
    <div class="card mb-0">
        <div class="card-header card-header-default" id="headingOne">
            <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne">
                    Collapsible Group Item #1
                </button>
            </h2>
        </div>
        <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
	
    <div class="card mb-0">
        <div class="card-header card-header-default" id="headingTwo">
            <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo">
                    Collapsible Group Item #2
                </button>
            </h2>
        </div>
        <div id="collapseTwo" class="collapse" data-parent="#accordionExample">
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
	
    <div class="card mb-0">
        <div class="card-header card-header-default" id="headingThree">
            <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree">
                    Collapsible Group Item #3
                </button>
            </h2>
        </div>
        <div id="collapseThree" class="collapse" data-parent="#accordionExample">
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
</div>