Bootstrap Collapse

17 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Collapsible Content

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Collapse classes to create toggleable content sections, perfect for FAQs, accordions, or hidden details. We’ll pair collapse elements with images for a lively look.

What You’ll Learn

Creating a basic collapse
Using collapse with buttons
Creating an accordion
Combining collapse with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Collapse

Bootstrap Collapse uses the collapse class with data-bs-toggle and data-bs-target to show or hide content. It’s great for saving space or revealing details on demand, triggered by buttons or links.

Assume Bootstrap CSS and JS are included in your project (we’ll skip the <link> and <script> tags as requested).

Step 2: Create a Basic Collapse

Start with a simple collapsible section. Use this code:

<div class="container">
    <h3>Basic Collapse</h3>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#basicCollapse">
        Toggle Content
    </button>
    <div class="collapse" id="basicCollapse">
        <div class="card card-body">
            <p>This is hidden content that appears when you click the button.</p>
        </div>
    </div>
</div>

Explanation:

container: Centers and constrains content.
btn btn-primary: Blue button to trigger the collapse.
data-bs-toggle="collapse" data-bs-target="#basicCollapse": Links the button to the collapsible content.
collapse and id="basicCollapse": Hides the content by default.
card card-body: Styles the content in a bordered box.

Clicking the button reveals the content.

Step 3: Use Collapse with Links

Trigger a collapse with a link instead of a button. Try this:

<div class="container">
    <h3>Collapse with Link</h3>
    <a href="#linkCollapse" class="btn btn-success" data-bs-toggle="collapse">Show Details</a>
    <div class="collapse" id="linkCollapse">
        <div class="card card-body">
            <p>These are the details you requested!</p>
        </div>
    </div>
</div>

Explanation:

btn btn-success: Green link styled as a button.
data-bs-toggle="collapse" href="#linkCollapse": Links to the collapsible section.
collapse and id="linkCollapse": Hides the content initially.

The link toggles the content visibility.

Step 4: Create an Accordion

Build an accordion with multiple collapsible sections. Add this:

<div class="container">
    <h3>Accordion</h3>
    <div class="accordion" id="myAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                    Question 1
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show">
                <div class="accordion-body">
                    This is the answer to question 1.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                    Question 2
                </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse">
                <div class="accordion-body">
                    This is the answer to question 2.
                </div>
            </div>
        </div>
    </div>
</div>

Explanation:

accordion and id="myAccordion": Wraps the accordion structure.
accordion-item: Defines each collapsible section.
accordion-button and data-bs-target: Toggles each section.
collapse show: Keeps the first section open by default; collapsed closes others.
accordion-body: Styles the content.

Clicking a button expands one section while collapsing others.

Step 5: Combine with an Image

Pair a collapse with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Project Details</h3>
            <p>Click to reveal more info.</p>
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#projectCollapse">
                Show Details
            </button>
            <div class="collapse" id="projectCollapse">
                <div class="card card-body">
                    <p>Project is on track for completion.</p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into collapse/text (8 units) and image (4 units).
btn btn-primary with data-bs-toggle: Toggles the collapsible section.
Uses a 200×150 green image for vibrancy.

The image enhances the collapse’s context.

Final Code

Here’s a combined example with varied collapse elements and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Collapse</h3>
            <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#simpleCollapse">
                Toggle Info
            </button>
            <div class="collapse" id="simpleCollapse">
                <div class="card card-body">
                    <p>This is some hidden information.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>FAQ Accordion</h3>
            <div class="accordion" id="faqAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqOne">
                            What is this?
                        </button>
                    </h2>
                    <div id="faqOne" class="accordion-collapse collapse show">
                        <div class="accordion-body">
                            This is a sample FAQ answer.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqTwo">
                            How does it work?
                        </button>
                    </h2>
                    <div id="faqTwo" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            Click to reveal details.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Task Info</h3>
            <p>View task details below.</p>
            <a href="#taskCollapse" class="btn btn-success" data-bs-toggle="collapse">Show Tasks</a>
            <div class="collapse" id="taskCollapse">
                <div class="card card-body">
                    <p>Tasks are due this week.</p>
                </div>
            </div>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A row with a gray button and a collapsible section.
A row with an accordion (two FAQ items, first open by default).
A two-column section with a green link, a collapsible section, and a red image (250×150).
All collapse elements are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Collapse Docs for more options.
Try data-bs-parent for exclusive accordion behavior.
Use collapse in Bootstrap navbars for mobile menus.

Conclusion

You’ve mastered Bootstrap Collapse! With classes like collapse, accordion, and data-bs-toggle, plus striking images, you’ve created interactive, toggleable content. Keep experimenting to enhance your webpages.