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

User · Answer

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  lt a gt  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

User · Answer

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    x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 3 1 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt div class  container  gt  x000D     lt div id  accordion  gt  x000D       lt div class  card  gt  x000D         lt a class  card-link card-header  data-toggle  collapse  href   collapseOne   gt  x000D          Collapsible Group Item  1 x000D         lt  a gt  x000D         lt div id  collapseOne  class  collapse  data-parent   accordion  gt  x000D           lt div class  card-body  gt  x000D            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  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  card  gt  x000D         lt a class  collapsed card-link card-header  data-toggle  collapse  href   collapseTwo  gt  x000D          Collapsible Group Item  2 x000D         lt  a gt  x000D         lt div id  collapseTwo  class  collapse  data-parent   accordion  gt  x000D           lt div class  card-body  gt  x000D            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  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  card  gt  x000D         lt a class  card-link card-header  data-toggle  collapse  href   collapseThree  gt  x000D          Collapsible Group Item  3 x000D         lt  a gt  x000D         lt div id  collapseThree  class  collapse  data-parent   accordion  gt  x000D           lt div class  card-body  gt  x000D            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  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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  lt a gt  tags  e g     panel-heading       cursor  pointer      Here s a jsfiddle with the modified html from the Bootstrap 3 documentation

User · Answer

Here is the working example for Bootstrap 4.3

_x000D_

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>_x000D_
_x000D_
<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">_x000D_
_x000D_
_x000D_
<div class="accordion" id="accordionExample">_x000D_
                <div class="card">_x000D_
                    <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">_x000D_
                        <h2 class="mb-0">_x000D_
                            <button class="btn btn-link" type="button" >_x000D_
                                Collapsible Group Item #1_x000D_
                            </button>_x000D_
                        </h2>_x000D_
                    </div>_x000D_
_x000D_
                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">_x000D_
                        <div class="card-body">_x000D_
                            _x000D_
                        </div>_x000D_
                    </div>_x000D_
                </div>_x000D_
                <div class="card">_x000D_
                    <div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">_x000D_
                        <h2 class="mb-0">_x000D_
                            <button class="btn btn-link collapsed" type="button" >_x000D_
                                Collapsible Group Item #2_x000D_
                            </button>_x000D_
                        </h2>_x000D_
                    </div>_x000D_
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">_x000D_
                        <div class="card-body">_x000D_
                            _x000D_
                        </div>_x000D_
                    </div>_x000D_
                </div>_x000D_
                <div class="card">_x000D_
                    <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">_x000D_
                        <h2 class="mb-0">_x000D_
                            <button class="btn btn-link collapsed" type="button" >_x000D_
                                Collapsible Group Item #3_x000D_
                            </button>_x000D_
                        </h2>_x000D_
                    </div>_x000D_
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">_x000D_
                        <div class="card-body">_x000D_
                            _x000D_
                        </div>_x000D_
                    </div>_x000D_
                </div>_x000D_
            </div>

_x000D_

User · Answer

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.

User · Answer

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.

User · Answer

Another way is make your  lt a gt  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  lt a gt

[twitter-bootstrap] How to make a Bootstrap accordion collapse when clicking the header div?

The answer is

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Tags