Bootstrap 4 Components

Collapse

You can toggle the contents of your pages using .collapse class.

The collapsible content is written inside the class .collapse and given an ID. Here, the content is given inside a Bootstrap card.

You can add collapsible contents by using <a> elements or by using buttons.

Using anchor element

The anchor element uses the href attribute with data-toggle=collapse”. The href attribute has the value of the ID of the collapsible content

Collapse Link

This is an example that toggles the content using an anchor element with href attribute.

<div>
    <a class="btn btn-primary" data-toggle="collapse" href="#myCollapseExample" aria-expanded="false" aria-controls="myCollapseExample">
    Collapse Link
    </a>
</div>
<div class="collapse" id="myCollapseExample">
    <div class="card card-body">
        This is an example that toggles the content using an anchor element with href attribute.
    </div>
</div>

Using Button

The button element uses data-target attribute with the value of the ID of the collapsible content. This element also has data-toggle=”collapse”.

This is an example that toggles the content using a button element with data-target attribute.

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseButtonExample" aria-expanded="false" aria-controls="myCollapseExample">
    Button with data-target
</button>
<div class="collapse" id="collapseButtonExample">
    <div class="card card-body">
        This is an example that toggles the content using a button element with data-target attribute.
    </div>
</div>

Accordion

Accordions are useful when you have a large amount of content and you don't want them all to be shown on your page but should be visible when you click on a button or link. Use the collapsible contents to make an accordion.

Let’s create an accordion in which the first collapsible content is visible by default onto the page when loaded. The accordion is styled using cards for each link. The link to the collapsible content is given in the header part of the card. We are using a link on the card but we can use buttons also if we want to.

We put the collapsible content inside a div with the class .collapse. Also, we have an ID which is used as the value of the href attribute in the link element.

We wanted our first content to be visible when the page is loaded. So we use the class .collapse and .show. But make sure to use that the collapsible element has the value aria-expanded=” true”. This attribute is to specify the current state of the element to assistive technologies like screen readers.

Accordingly, the contents that are closed by default when the page is loaded should have a value aria-expanded=”false”.

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Collapsible Group Item #3

<div id="accordion" role="tablist" aria-multiselectable="true">
    <div class="card">
        <div class="card-header" role="tab" id="headingOne">
            <h5 class="mb-0">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #1
                </a>
            </h5>
        </div>
        <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
            <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" role="tab" id="headingTwo">
            <h5 class="mb-0">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Collapsible Group Item #2
                </a>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" role="tab" id="headingThree">
            <h5 class="mb-0">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Collapsible Group Item #3
                </a>
            </h5>
        </div>
        <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

Win a chance to get our Mega-pack for FREE!