Can't get BS collapse accordion to work on all the objectives of /requirements
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Given I'm on http://www.compliancechimp.com/requirements
When I click Description or Guidance
Then then I expect to see an uncollapsed paragraph containing the description and guidance.

However, this isn't the case. You can see it live on http://www.compliancechimp.com.

Here's the commit and line number
https://github.com/akshatpradhan/compliance_chimp/commit/7b9754553991d9d2c75ad4d0e637e5cbd87c3b36#diff-5b3b134b9ce7193ab76f9593197e6677R17

awarded to alixaxel

Crowdsource coding tasks.

1 Solution


The problem is you're not using specific IDs (always using #collapseOne and #collapseTwo).

You should also add/use .panel-group classes to make them group nicely.


In the .panel-group add a specific ID:

<div class="panel-group" id="accordion_{{this._id}}">

In the .panel-collapse also add another specific IDs:

<div id="collapse_{{this._id}}_requirement" class="panel-collapse collapse">...</div>
<div id="collapse_{{this._id}}_guidance" class="panel-collapse collapse">...</div>

In the a tags, also add the same IDs:

<a data-toggle="collapse" href="#collapse_{{this._id}}_requirement">...</a>
<a data-toggle="collapse" href="#collapse_{{this._id}}_guidance">...</a>

This will expand each one individually without collapsing the others. To make it collapse the others, add data-parent="#accordion_{{this._id}}" (this is the first ID I described above) to all the a tags.

That's all there's to it, note that {{this._id}} must be unique. I used the MongoDB _id field in my case.


The overall structure should look like this:

<div class="panel-group" id="accordion_{{this._id}}">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion_{{this._id}}" href="#collapse_{{this._id}}_requirement">
                    Requirement
                </a>
            </h3>
        </div>
        <div id="collapse_{{this._id}}_description" class="panel-collapse collapse">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion_{{this._id}}" href="#collapse_{{this._id}}_guidelines">
                    Guidelines
                </a>
            </h3>
        </div>
        <div id="collapse_{{this._id}}_guidelines" class="panel-collapse collapse">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
</div>
@alixaxel I implemented your solution and the accordion still isn't working. I pushed it live to production for you to check out. http://www.compliancechimp.com/requirements
akshatpradhan over 5 years ago
@akshatpradhan: Remember that in CSS query selectors a dot is a class selector, so when you do #collapse-1.1.1.a-guidance what you're in fact saying is element with ID collapse-1 which also has all the following classes: [1, 1, a-guidance]. I suggest you use other source for the identifiers, or replace any punctuation / special character with a - (don't start IDs / classes with - or _ either, the browser support for the first is none and for the second is limited to newer browsers).
alixaxel over 5 years ago
Makes sense?
alixaxel over 5 years ago
This makes sense, I see what you mean. I need to think about how to best approach this then. Maybe I need to put something in the RequirementsHelper.rb that regex's 1.1.1.a to 1-1-1-a
akshatpradhan over 5 years ago
This was very helpful btw!
akshatpradhan over 5 years ago
@akshatpradhan I updated your PR#112 with a fix for the accordion bug. I've added a method in the Requirement model to replace dots with dashes in the name field and used this new method for the requirements index view.
kc00l over 5 years ago