Bootstrap Views Accordion Problem

Question

I am trying to create a website. For this website, Ι am using the bootstrap business theme (Bootstrap Business Demo) of the good people of More than just Themes. I have also downloaded and enabled the Views module and the Views Bootstrap module.

I have created multiple views, all of which have as content types articles: one of them is the view studies, another one is named announcement and another one is called events. Along with these views, I have created their assorted blocks.

The blocks are customized as follows:

Format : Bootstrap accordion using fields

Fields: Content: Body , Content: Title

The problem:

I have set the blocks (three blocks each representing a different view) to appear in the themes' second sidebar. When I press the elements of any block different from the top one, the top blocks' collapse effect of the corresponding item is activated instead. That is, if I press the second accordion item of the third block, the second accordion item of the first block will be expanded(if it doesn't exist, then the second item of the second block will be expanded etc.).

The proposed solution:

I think I know why this is happening. I am currently working on the how. I used the inspect element feature of my chromium browser and came up with this:

Studies block, first element:

<a class="accordion-toggle" data-toggle="collapse"
   data-parent="#views-bootstrap-accordion-1" href="#collapse0">
     Study 1
</a>

Announcements block, first element:

<a class="accordion-toggle" data-toggle="collapse"                              
   data-parent="#views-bootstrap-accordion-2" href="#collapse0">
     Announcement 1          
</a>

Events block, first element:

<a class="accordion-toggle" data-toggle="collapse"                        
   data-parent="#views-bootstrap-accordion-3" href="#collapse0">
     Event 1       
</a>

Although their data parent is different (views-bootstrap-accordion-[1-3]), all of these items reference the same collapse0 id(?) element. I am currently trying to figure out the css(?) file these point to and see if I can fix this, either by tweaking the module (views bootstrap) or the theme(bootstrap business).

Any help would be mush appreciated.

Answer 1

Came across your post considering I had the exact same problem. I had several different attached views to my page that were grouped by different taxonomy terms.

The way I fixed it is a little janky, but it works... basically edit the Views Bootstrap module in sites/all/modules/views_bootstrap/templates/accordion/views-bootstrap-accordion-plugin-style.tpl.php and store a random integer in PHP as a variable with rand(); then append that variable to the $key on your accordion-toggle tag as well as the "collapse" div.

It should work after that.

Answer 2

Just wanted to add to Milo25's Answer a slightly cleaner approach would be to add the id of the views-bootstrap-accordion instead of a random number Element:

<a class="accordion-toggle"
         data-toggle="collapse"
         data-parent="#views-bootstrap-accordion-<?php print $id ?>"
         href="#collapse<?php print $key . $id ?>">


<div id="collapse<?php print $key . $id ?>" class="panel-collapse collapse">