How can I make my accordion collapse after clicking the heading rather than just the text in the heading? Right now it only collapses when I click "Major".

JSFiddle: /

My accordion html:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="accordian" href="#collapseMajor">
                    Major
                </a>
            </h4>
        </div>
        <div id="collapseMajor" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="All" title="major" class="check-all-majors" checked>
                            All Majors
                    </label>
                </div>
                <div class="checkbox-group">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="AFM" title="major" class="check-majors" checked>AFM
                        </label>
                    </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="ARTS" title="major" class="check-majors" checked>ARTS
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="CHEM" title="major" class="check-majors" checked>CHEM
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

How can I make my accordion collapse after clicking the heading rather than just the text in the heading? Right now it only collapses when I click "Major".

JSFiddle: http://jsfiddle/P63pp/

My accordion html:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="accordian" href="#collapseMajor">
                    Major
                </a>
            </h4>
        </div>
        <div id="collapseMajor" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="All" title="major" class="check-all-majors" checked>
                            All Majors
                    </label>
                </div>
                <div class="checkbox-group">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="AFM" title="major" class="check-majors" checked>AFM
                        </label>
                    </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="ARTS" title="major" class="check-majors" checked>ARTS
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="CHEM" title="major" class="check-majors" checked>CHEM
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

• javascript
• jquery
• html
• twitter-bootstrap

3 Answers 3

You need to make the a tag a block element and apply the panel-heading padding the a. You could create a panel-accordion panel and use that for all accordion panels. Demo.

.panel-accordion .panel-heading
{
    padding: 0;
}

.panel-accordion .panel-heading a
{
    display: block;
    padding: 10px 15px;
}

Thanks dfsq! If you remove the tag, the underline behavior goes away - works even better!

I also moved the other attributes up to the panel-heading div - away from the tag that bootstrap sample code gives you. This makes the panel-heading act in the same way as the old did...

<div class="panel-heading" role="tab" id="headingOne" data-target="#collapseOne" data-toggle="collapse" data-parent="#accordion">
    <h4 class="panel-title">Collapsable Group Item #1</h4>
</div>

I added some CSS on the page to change the cursor:

    <style> .panel-heading { cursor: pointer; } </style>

You can change HTML a little:

<div class="panel-heading" data-toggle="collapse" data-target="#collapseMajor">
    <h4 class="panel-title">
        <a href="#collapseMajor">Major</a>
    </h4>
</div>

So just add data-toggle="collapse" data-target="#collapseMajor" to .panel-heading div.

Demo: http://jsfiddle/P63pp/1/