Accordions

Accordions are collapsible panels where only one section is open at a time. They are great for FAQs, settings panels, and long content.

Basic Accordion

<div class="panel-group" id="accordion">
    <!-- Panel 1 -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#panel1">
                    Section 1: Getting Started
                </a>
            </h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">
                Content for section 1. This panel is open by default.
            </div>
        </div>
    </div>

    <!-- Panel 2 -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#panel2">
                    Section 2: Advanced Topics
                </a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Content for section 2.
            </div>
        </div>
    </div>

    <!-- Panel 3 -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#panel3">
                    Section 3: FAQs
                </a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Frequently asked questions go here.
            </div>
        </div>
    </div>
</div>

How It Works

• data-parent="#accordion" ensures only one panel is open at a time
• collapse in opens a panel by default
• collapse keeps a panel closed by default
• Remove data-parent to allow multiple panels open simultaneously

Coloured Panels

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-danger">...</div>