How to make a Bootstrap accordion collapse when clicking the header div?

Question

In a Bootstrap accordion, instead of requiring a click on the a text, I want to make it collapse when clicking anywhere in the panel-heading div.

I am using Bootstrap 3. So instead of accordion, it's just a collapsible panel. Any idea how to do the entire panel clickable?

Well You got an answer. But, this link will help you to find different styles of Bootstrap Accordion Menus http://www.designerslib.com/bootstrap-accordion-menu/ — Karuppiah RK, Apr 04 '16 at 19:18

grim · Accepted Answer · 2015-11-08T18:17:54.017

302

All you need to do is to to use...

data-toggle="collapse"
data-target="#ElementToExpandOnClick"

...on the element you want to click to trigger the collapse/expand effect.

The element with data-toggle="collapse" will be the element to trigger the effect. The data-target attribute indicates the element that will expand when the effect is triggered.

Optionally you can set the data-parent if you want to create an accordion effect instead of independent collapsible, e.g.:

data-parent="#accordion"

I would also add the following CSS to the elements with data-toggle="collapse" if they aren't <a> tags, e.g.:

.panel-heading {
    cursor: pointer;
}

Here's a jsfiddle with the modified html from the Bootstrap 3 documentation.

edited Nov 08 '15 at 18:17

answered Oct 08 '13 at 03:52

grim

6,669
11
38
57

11

Seems like this should be the default/demo code. Much nicer than using . – dbn Jan 16 '14 at 12:19
this method doesn't work for iphone. per the answer to http://stackoverflow.com/questions/19866172/bootstrap-3-accordion-collapse-does-not-work-on-iphone it needs to be (since it requires the href) in order for it to be collapsible on iphone... any ideas? – minovsky Mar 20 '14 at 04:03
2

@minovsky How about this updated JSFiddle: http://jsfiddle.net/Tcgyx/60/ ? Unfortunately I don't have an iPhone to test. I'll update my answer if this works. – grim Mar 20 '14 at 14:50
@grim thanks for the fiddle! It does not always work, but let me experiment more and figure out if I can produce the failure reliably. – minovsky Mar 20 '14 at 17:48
I used this solution, but the animation is jumpy. Also on the first click, the div that is already open animates with the opening animation instead of the collapsing one. – I ate some tau Apr 21 '14 at 02:05
Oh. Nevermind. I messed it up. Looking at the fiddle fixed me up. Thanks! – I ate some tau Apr 21 '14 at 02:10
@grim, thanks for sharing. I have one more question, I have list-group inside #ElementToExpandOnClick. I also want those lists clickable when I click the list list-group-item DIV. Is there a way to do that? – Terminal User Aug 12 '14 at 21:03
when i move the data-toggle to the "div.panel-heading" ... where should i put the role="button" ? – wutzebaer Jul 28 '15 at 20:51
@wutzebaer The role attribute is optional (http://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html) but I would add it to the element that does an action - in this case, on `div.panel-heading` – grim Jul 28 '15 at 22:09
1

@wutzebaer You could have `role="tab button"` and the browser will interpret the first one in the list that it understands (most likely `tab`). Though, I'm not sure which one of the two is better. Try to find the meaning of the `tab` and `button` roles and that would give you the answer as to which to choose. – grim Jul 28 '15 at 22:16
This works great, but I have other buttons/elements in the heading that now also toggle the collapse. Any way I can only have the "background" of the heading do the toggling? – cpury Aug 04 '15 at 08:30
Thanks for the tips! you can also add this to the css to make it more obvious to the user that the card-header is active : `.panel-heading:hover { background: #fff; }` – stockersky Dec 15 '18 at 20:12
If angular 4/5, use `attr.data-target="#ElementToExpandOnClick"` instead of `data-target="#ElementToExpandOnClick"`. The reason is `data-target` is rendered as `target` in div/span – reverie_ss Feb 14 '19 at 13:59

score 71 · Answer 2 · answered Nov 25 '13 at 09:31

71

Another way is make your <a> full fill all the space of the panel-heading. Use this style to do so:

.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}

Check this demo (http://jsfiddle.net/KbQyx/).

Then when you clicking on the heading, you are actually clicking on the <a>.

answered Nov 25 '13 at 09:31

calfzhou

1,340
10
10

Ah great solution for those of us using the GWTBootstrap library. – snowe Apr 24 '14 at 23:32
I didn't see this until I implemented a similar solution. CSS changes were the least invasive change for me. I chose display: inline-block, width: 100% and since we are using Glyphicons for ours, the a:before has margin-left: -10px and margin-right: 10px. – Kirk Liemohn Jul 08 '14 at 16:25
1

This method doesn't work on iOS devices, which is typically a primary concern when working with Bootstrap. – Jared Nov 06 '14 at 22:43
Jared, can you elaborate? Why doesn't this work on is this limited to certain Safari versions? – Dr. Jan-Philip Gehrcke May 28 '15 at 22:42
1

The advantage of this method is that it also works for Boostrap UI for AngularJS (where you do not want/need Bootstrap's JS). – Dr. Jan-Philip Gehrcke May 28 '15 at 22:43
Tested with react-bootstrap, this one works. This solution doesn't bloat the DOM and should be the top answer. – cchamberlain Nov 22 '15 at 22:25
just great, no visible changes and fully clickable! – edencorbin Nov 23 '21 at 15:12
This is much better than the accepted solution if you also use a expand/collapse icons. It saves you from a lot of unwanted manipulations in many other cases too. – Fr0zenFyr May 21 '23 at 10:20

score 13 · Answer 3 · answered Oct 21 '13 at 16:11

13

I've noticed a couple of minor flaws in grim's jsfiddle.

To get the pointer to change to a hand for the whole of the panel use:

.panel-heading {
   cursor: pointer;
}

I've removed the <a> tag (a style issue) and kept data-toggle="collapse" data-parent="#accordion" data-target="#collapse..." on panel-heading throughout.

I've added a CSS method for displaying chevron, using font-awesome.css in my jsfiddle:

http://jsfiddle.net/weaversnap/7FqsX/1/

answered Oct 21 '13 at 16:11

WeaverSnap

131
2

This almost works. The chevrons appear upside down when the page loads and correct themselves after expanding and collapsing one of the panels. – Connie DeCinko Jul 12 '16 at 15:40
@ConnieDeCinko Change `panel-heading` to `panel-heading collapsed` to fix the upside down chevrons. – Amy Barrett Jan 16 '17 at 09:42

user2233706 · Answer 4 · 2019-07-17T15:56:47.947

Here's a solution for Bootstrap4. You just need to put the card-header class in the a tag. This is a modified from an example in W3Schools.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="accordion">
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
        Collapsible Group Item #1
      </a>
      <div id="collapseOne" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>

score 5 · Answer 5 · answered May 31 '17 at 02:17

Simple solution would be to remove padding from .panel-heading and add to .panel-title a.

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

This solution is similar to the above one posted by calfzhou, slightly different.

score 2 · Answer 6 · answered Nov 11 '19 at 06:28

Here is the working example for Bootstrap 4.3

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="accordion" id="accordionExample">
                <div class="card">
                    <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link" type="button" >
                                Collapsible Group Item #1
                            </button>
                        </h2>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #2
                            </button>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #3
                            </button>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
            </div>

score 1 · Answer 7 · edited May 23 '17 at 12:02

1

Actually my panel had this collapse state arrow icon and I tried other answers in this post , but icon position changed, so here is the solution with collapse state arrow icon.

Add this Custom CSS

 .panel-heading 
  {
   cursor: pointer;
   padding: 0;
  }

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

Credit's goes to this post answerer.

Hope helps.

edited May 23 '17 at 12:02

Community

1
1

answered Sep 28 '16 at 14:58

Shaiju T

6,201
20
104
196

How to make a Bootstrap accordion collapse when clicking the header div?

7 Answers7

Linked