Bootstrap Accordion button toggle data-parent not working

Question

I m trying to create an accordion using Bootstrap 3 using the button collapsible with the data attribute  without the accordion markup  It just looks more cleaner to me    However I cannot make the data-parent attribute to work  I want when opening a question  all others to close  I m reading the docs   http   getbootstrap com javascript  collapse-usage   but still cannot get it to work   I m using the following code    lt div class  accordion  id  myAccordion  gt       lt button type  button  class  btn btn-danger  data-toggle  collapse  data-target   collapsible-1  data-parent   myAccordion  gt Question 1  lt  button gt       lt div id  collapsible-1  class  collapse  gt       lt p gt Etiam posuere quam ac quam  Maecenas aliquet accumsan leo  Nullam dapibus fermentum ipsum  Etiam quis quam  Integer lacinia  Nulla est  lt  p gt       lt  div gt       lt button type  button  class  btn btn-danger  data-toggle  collapse  data-target   collapsible-2  data-parent   myAccordion  gt Question 2  lt  button gt       lt div id  collapsible-2  class  collapse  gt       lt p gt Etiam posuere quam ac quam  Maecenas aliquet accumsan leo  Nullam dapibus fermentum ipsum  Etiam quis quam  Integer lacinia  Nulla est  lt  p gt       lt  div gt       lt button type  button  class  btn btn-danger  data-toggle  collapse  data-target   collapsible-3  data-parent   myAccordion  gt Question 3  lt  button gt       lt div id  collapsible-3  class  collapse  gt       lt p gt Etiam posuere quam ac quam  Maecenas aliquet accumsan leo  Nullam dapibus fermentum ipsum  Etiam quis quam  Integer lacinia  Nulla est  lt  p gt       lt  div gt   lt  div gt    Here is the JSFiddle  http   jsfiddle net twinsen AEew4   I ll be very happy if someone points to me where I m making a mistake

User · Answer

If found this alteration to Krzysztof answer helped my issue

$('#' + parentId + ' .collapse').on('show.bs.collapse', function (e) {            
    var all = $('#' + parentId).find('.collapse');
    var actives = $('#' + parentId).find('.in, .collapsing');
    all.each(function (index, element) {
      $(element).collapse('hide');
    })
    actives.each(function (index, element) {                
      $(element).collapse('show');                
    })
})

if you have nested panels then you may also need to specify which ones by adding another class name to distinguish between them and add this to the a selector in the above JavaScript

User · Answer

Bootstrap 4  Use the data-parent    attribute on the collapse element  instead of the trigger element    lt div id  accordion  gt     lt div class  card  gt       lt div class  card-header  gt         lt h5 gt           lt button class  btn btn-link  data-toggle  collapse  data-target   collapseOne  gt            Collapsible  1 trigger          lt  button gt         lt  h5 gt       lt  div gt       lt div id  collapseOne  class  collapse show  data-parent   accordion  gt         lt div class  card-body  gt          Collapsible  1 element        lt  div gt       lt  div gt     lt  div gt         more cards collapsibles inside  accordion parent   lt  div gt      Bootstrap 3  See this issue on GitHub  https   github com twbs bootstrap issues 10966  There is a  bug  that makes the accordion dependent on the  panel class when using the data-parent attribute  To workaround it  you can wrap each accordion group in a  panel  div    http   bootply com 88288   lt div class  accordion  id  myAccordion  gt       lt div class  panel  gt           lt button type  button  class  btn btn-danger  data-toggle  collapse  data-target   collapsible-1  data-parent   myAccordion  gt Question 1  lt  button gt           lt div id  collapsible-1  class  collapse  gt                          lt  div gt       lt  div gt       lt div class  panel  gt           lt button type  button  class  btn btn-danger  data-toggle  collapse  data-target   collapsible-2  data-parent   myAccordion  gt Question 2  lt  button gt           lt div id  collapsible-2  class  collapse  gt                          lt  div gt       lt  div gt       lt div class  panel  gt           lt button type  button  class  btn btn-danger  data-toggle  collapse  data-target   collapsible-3  data-parent   myAccordion  gt Question 3  lt  button gt           lt div id  collapsible-3  class  collapse  gt                          lt  div gt       lt  div gt   lt  div gt    Edit  As mentioned in the comments  each section doesn t have to be a  panel  However       panel must be a direct child of the element used as data-parent  each accordion section  data-toggle   must be a direct child of the  panel  http   www bootply com AbiRW7BdD6

User · Answer

Here is a  hopefully  universal patch I developed to fix this problem for BootStrap V3   No special requirements other than plugging in the script       not  panel   gt   data-toggle  collapse   data-parent    click function         var parent     this  data  parent        var items       data-toggle  collapse   data-parent      parent         not this       items each function             var target     this  data  target              this  prop  href   split      1             target  filter   in   collapse  hide                  EDIT  Below is a simplified answer which still meets my needs  and I m now using a delegated click handler     document body  on  click     not  panel   gt   data-toggle  collapse   data-parent    function         var parent     this  data  parent        var target     this  data  target        this  prop  hash          parent  find   collapse in   not target  collapse  hide

User · Answer

Note  not only there is dependency on  panel  it also has dependency on the DOM structure   Make sure your elements are structured like this        lt div id  parent-id  gt           lt div class  panel  gt               lt a data-toggle  collapse  data-target   opt1  data-parent   parent-id  gt Control lt  a gt               lt div id  opt1  class  collapse  gt        It s basically what  Blazemonger said  but I think the hierarchy of the target element matters too  I didn t finish trying every possibility out  but basically it should work if you follow this hierarchy   FYI  I had more layers between the control div  amp  content div and that didn t work

User · Answer

Bootstrap 3 Try this  Simple solution with no dependencies   x000D   x000D      data-toggle  collapse     click function           collapse in   collapse  hide       x000D   x000D   x000D

User · Answer

As Blazemonger said   parent   panel and  collapse have to be direct descendants  However  if You can t change Your html  You can do workaround using bootstrap events and methods with the following code       your-parent  collapse   on  show bs collapse   function  e        var actives       your-parent   find   in   collapsing        actives each  function  index  element              element  collapse  hide

User · Answer

I got the same problem when toggling the accordion  But when I try to put the script block in   the header block  it works for my case     lt head gt             lt link rel  stylesheet  href     assets css bootstrap css    gt          lt script src     assets js jquery-1 9 1 min js   gt  lt  script gt      lt script src     assets js bootstrap js   gt  lt  script gt    lt  head gt

[html] Bootstrap Accordion button toggle "data-parent" not working

Examples related to html

Examples related to twitter-bootstrap

Examples related to accordion

Examples related to twitter-bootstrap-3