Javascript – Bootstrap make accordion collapse by clicking heading

htmljavascriptjquerytwitter-bootstrap

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.net/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>

Best Answer

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;
}

Related Solutions

Html – Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here: http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.

Html – How to make a div not larger than its contents

The solution is to set your div to display: inline-block.

Related Topic