One Click to Open Two Collapsible Panels that are in Two Separate Accordions(Panel-Group)

Question

I have two separated accordions (Bootstrap 3). And i want to open the same collapsible panel in the both accordions with only single click. I tried it with the same "ID" for the both collapsible panels, but when i click - only the panel from the first accordion is opened.

<div class="panel-group" id="accordion">
 <div class="panel">
  <div class="panel-heading" data-toggle="collapse" href="#collapseOne"> // 1* i want when i click this 2*
  </div>
 </div>
</div>
<div class="panel-group" id="accordion">
 <div class="panel">
  <div class="panel-heading" data-toggle="collapse" href="#collapseOne"> // 2* this to be open too
  </div>
 </div>
</div>

So, could i achieve that with modifying the "href" property (if its possible of course) or i need to write some JQuery with onclick event to do something like addClass to the element with class collapse?

Answer 1

I Found a solution from an existing answer- Raphael Serota says:

"You can manually toggle the accordion with $('#myAccordion').collapse('toggle')"

. So I write my script like this:

$('.panel-heading').click(function(){

    var href = $(this).attr('href');

    if($(href + "Dyn").hasClass("in")){
            $(href + "Dyn").collapse("toggle");
        }else{
            $(href + "Dyn").collapse("toggle");
        }
});

This works just like my previous solution but keeps the animation running .