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

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

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

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

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

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

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?

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3