Bootstrap Collapse

Collapse allows an element to be hidden and displayed when the user clicks a trigger.

For example, you can create:

• FAQ sections.
• Read More sections.
• Expandable menus.
• Additional information panels.
• Mobile navigation sections.

The .collapse class creates the basic Collapse behavior.

<div class="collapse">

    Hidden content

</div>

The content is hidden initially when only the .collapse class is used.

The .show class makes the Collapse content visible when the page loads.

<div class="collapse show">

    Visible content

</div>

Removing the show class causes the content to start in the collapsed state.

A button can control a Collapse element using Bootstrap data attributes.

<button
class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#demo">

    Show Content

</button>

<div
id="demo"
class="collapse mt-3">

    This is collapsible content.

</div>

The data-bs-toggle="collapse" attribute tells Bootstrap that the element should control a Collapse component.

<button
data-bs-toggle="collapse"
data-bs-target="#content">

    Toggle Content

</button>

When the button is clicked, Bootstrap toggles the visibility of the target element.

The data-bs-target attribute identifies the Collapse element controlled by the button.

<button
data-bs-toggle="collapse"
data-bs-target="#myContent">

    Open

</button>

<div
id="myContent"
class="collapse">

    Hello Bootstrap

</div>

The selector in data-bs-target must match the target element.

The simplest way to connect a trigger to a Collapse element is by using an ID.

<button
class="btn btn-success"
data-bs-toggle="collapse"
data-bs-target="#example">

    Click Me

</button>

<div
id="example"
class="collapse">

    Bootstrap Collapse Example

</div>

The # before the ID is required in data-bs-target.

A link can also be used as a Collapse trigger.

<a
class="btn btn-primary"
data-bs-toggle="collapse"
href="#linkContent"
role="button"
aria-expanded="false"
aria-controls="linkContent">

    Show Details

</a>

<div
class="collapse mt-3"
id="linkContent">

    Additional details are shown here.

</div>

The aria-expanded attribute communicates whether the controlled Collapse content is currently expanded.

<button
data-bs-toggle="collapse"
data-bs-target="#info"
aria-expanded="false"
aria-controls="info">

    Show Information

</button>

Bootstrap updates this attribute as the Collapse state changes.

The aria-controls attribute identifies the element controlled by the trigger.

<button
data-bs-toggle="collapse"
data-bs-target="#details"
aria-controls="details">

    Details

</button>

<div
id="details"
class="collapse">

    More information.

</div>

The value of aria-controls should match the target element's ID.

Bootstrap can add the collapsed class to a trigger when the target content is closed.

<button
class="btn btn-primary collapsed"
data-bs-toggle="collapse"
data-bs-target="#box"
aria-expanded="false">

    Toggle

</button>

The state of the button can be used for styling and accessibility.

A page can contain multiple independent Collapse components.

<button
class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#one">

    Section One

</button>

<div
id="one"
class="collapse">

    Content One

</div>


<button
class="btn btn-success mt-2"
data-bs-toggle="collapse"
data-bs-target="#two">

    Section Two

</button>

<div
id="two"
class="collapse">

    Content Two

</div>

Bootstrap Accordion is built around Collapse functionality.

An Accordion provides a structured interface for displaying multiple collapsible sections, while a basic Collapse can be used independently for any expandable content.

<div class="collapse">

    Content

</div>

Understanding Collapse makes it easier to understand Bootstrap Accordion.

The data-bs-parent attribute can be used when multiple Collapse elements should behave as part of the same parent group.

<div
id="parent">

    <div
    class="collapse"
    data-bs-parent="#parent">

        Content

    </div>

</div>

This pattern is commonly used in Accordion-style interfaces.

Collapse is useful for creating a Read More section.

<p>
Bootstrap is a popular frontend framework.
</p>

<button
class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#more">

    Read More

</button>

<div
id="more"
class="collapse mt-3">

    Bootstrap provides many responsive
    components and utility classes.

</div>

Collapse is commonly used to create FAQ sections.

<button
class="btn btn-outline-primary"
data-bs-toggle="collapse"
data-bs-target="#answer1">

    What is Bootstrap?

</button>

<div
id="answer1"
class="collapse mt-2">

    Bootstrap is a frontend framework
    for creating responsive websites.

</div>

Collapse content can contain lists and other HTML elements.

<button
class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#topics">

    Show Topics

</button>

<div
id="topics"
class="collapse mt-3">

    <ul>

        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Bootstrap</li>

    </ul>

</div>

A Bootstrap Card can also be placed inside a Collapse component.

<button
class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#courseCard">

    View Course

</button>

<div
id="courseCard"
class="collapse mt-3">

    <div class="card">

        <div class="card-body">

            <h5>
            Web Development
            </h5>

            <p>
            Learn HTML, CSS and JavaScript.
            </p>

        </div>

    </div>

</div>

Bootstrap also supports horizontal Collapse using the collapse-horizontal class.

<button
class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#horizontal">

    Toggle

</button>

<div
class="collapse collapse-horizontal"
id="horizontal">

    <div
    class="card card-body"
    style="width: 300px;">

        Horizontal content

    </div>

</div>

This allows the content to expand or collapse horizontally rather than vertically.

A form can be placed inside a Collapse component.

<button
class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#contactForm">

    Show Contact Form

</button>

<div
id="contactForm"
class="collapse mt-3">

    <form>

        <input
        type="text"
        class="form-control mb-2"
        placeholder="Name">

        <input
        type="email"
        class="form-control mb-2"
        placeholder="Email">

        <button
        class="btn btn-success">

            Submit

        </button>

    </form>

</div>

Tables can also be placed inside a collapsible section.

<button
class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#studentTable">

    Show Students

</button>

<div
id="studentTable"
class="collapse mt-3">

    <table class="table table-bordered">

        <tr>
            <th>Name</th>
            <th>Course</th>
        </tr>

        <tr>
            <td>Rahul</td>
            <td>Python</td>
        </tr>

    </table>

</div>

Collapse is also an important part of responsive navigation patterns in Bootstrap.

For example, a mobile navigation menu can hide its links and display them when the user clicks the menu button.

<button
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#navbarMenu">

    Menu

</button>

<div
id="navbarMenu"
class="collapse navbar-collapse">

    Navigation links

</div>

Collapse can also be controlled through the Bootstrap JavaScript API.

const element =
document.getElementById(
'myCollapse'
);

const collapse =
new bootstrap.Collapse(
element
);

collapse.show();

The show() method displays the Collapse element.

Bootstrap Collapse provides several useful methods.

• show() – displays the content.
• hide() – hides the content.
• toggle() – changes between shown and hidden states.

const collapse =
new bootstrap.Collapse(
element
);

collapse.show();

collapse.hide();

collapse.toggle();

Bootstrap Collapse provides events that allow JavaScript code to respond when the component changes state.

• show.bs.collapse
• shown.bs.collapse
• hide.bs.collapse
• hidden.bs.collapse

const element =
document.getElementById(
'myCollapse'
);

element.addEventListener(
'shown.bs.collapse',
function(){

    console.log(
    'Content is now visible'
    );

});

Accessible Collapse components should clearly communicate their relationship between the trigger and the controlled content.

• Use aria-expanded.
• Use aria-controls.
• Use meaningful button text.
• Make sure keyboard users can operate the trigger.
• Do not hide important information without providing a clear way to access it.

<button
data-bs-toggle="collapse"
data-bs-target="#accessibilityExample"
aria-expanded="false"
aria-controls="accessibilityExample">

    Show Details

</button>

Avoid these common mistakes:

• Forgetting data-bs-toggle="collapse".
• Using the wrong data-bs-target.
• Using duplicate IDs.
• Forgetting the Bootstrap JavaScript bundle.
• Using an incorrect aria-controls value.
• Using show when the section should start hidden.
• Using too many nested Collapse components.
• Hiding important information without clear controls.

The following example combines buttons, Collapse elements, accessibility attributes, and multiple sections.

<div class="mb-3">

    <button
    class="btn btn-primary"
    data-bs-toggle="collapse"
    data-bs-target="#courseInfo"
    aria-expanded="false"
    aria-controls="courseInfo">

        Course Information

    </button>


    <div
    id="courseInfo"
    class="collapse mt-3">

        <div class="card card-body">

            <h5>
            Bootstrap Course
            </h5>

            <p>
            Learn Bootstrap components,
            utilities and responsive design.
            </p>

        </div>

    </div>

</div>


<div class="mb-3">

    <button
    class="btn btn-success"
    data-bs-toggle="collapse"
    data-bs-target="#topicsInfo"
    aria-expanded="false"
    aria-controls="topicsInfo">

        Course Topics

    </button>


    <div
    id="topicsInfo"
    class="collapse mt-3">

        <div class="card card-body">

            <ul>

                <li>Containers</li>
                <li>Grid System</li>
                <li>Buttons</li>
                <li>Forms</li>
                <li>Components</li>

            </ul>

        </div>

    </div>

</div>