CODEWITHSUNDEEP
htmltwitter-bootstrap-3
murday1983
murday1983

Reputation: 4026

Twitter Bootstrap3 - Make An Accordion Expand On A Different Page When A Link Is Clicked

I raised a question before about how to expand an accordion on a link click:

Twitter Bootstrap 3 - Auto Expand An Accordion When A Link Clicked In Another Accordion

To which I got the solution for, but now I have a different issue, how do I expand an accordion on another page from clicking a link on another page.

I have tried various ways as shown below none seem to work:

 1. <a class="collapsed" href="[PATH NAME]/#" data-toggle="collapse"
    data-target="#collapseTwo">Test</a>
 2. <a class="collapsed" href="#" data-toggle="collapse"
    data-target="[PATH NAME]/#collapseTwo">Test</a>
 3. <a class="collapsed" href="[PATH NAME]" data-toggle="collapse"
    data-target="[PATH NAME]/#collapseTwo">Test</a>

Upvotes: 1

Views: 822

Answers (1)

Christina
Christina

Reputation: 34642

This answer here answers your question:

Bootstrap Collapse - open the given id fragment

Put EITHER in your jQuery or JS

// === opens a collapse from a url
location.hash && $(location.hash + '.collapse').collapse('show');

OR -- not both

// === opens a collapse from a url
var anchor = window.location.hash.replace("#", "");
$(".collapse").collapse('hide'); // REMOVE THIS it and it will work more smoothly
$("#" + anchor).collapse('show');

The latter requires a load function. $(document).ready(function() { ... });

Then link to the collapsed section with the UNIQUE id like you would normally link to an anchor:

<a href="thepage.html#uniqueID">Link text</a>

Upvotes: 2

Related Questions