Open bootstrap 3.2.0 accordion panel from another page using querystring

Hi all,

I need to open a specific  bootstrap accordion panel from the link on another page.

There are lots of articles on this subject but none that provide full examples. Especially the code required for the target page and how to integrate into the accordion.

Thanks so much!
jayschAsked:
Who is Participating?
 
Ioannis ParaskevopoulosCommented:
A nice answer was found here.

If i would like to add it in your case i would do that:
$(document).ready(function() {
    var idToToggle = window.location.hash.replace("#", "");
    $("#" + idToToggle ).collapse('show');
});

Open in new window


I haven't test it but from the looks of it it seems that the following would also work:
$(document).ready(function() {
    var idToToggle = window.location.hash;
    $(idToToggle ).collapse('show');
});

Open in new window


Giannis
0
 
Ioannis ParaskevopoulosCommented:
Hi,

I think you need to give a bit more info on your project. Is it ASP classic, is it .NET, is it PHP or HTML, or something else?
The answer could depend on that info.

Giannis
0
 
jayschAuthor Commented:
Sorry about lack of details. My page is standard html (see attached).

There is a menu on line 88 that exists on all pages of the site (including the attached page containing accordion). So I need to add arguments to these 10 links (both on the attached accordion page and all other pages of the site) so that the appropriate accordion panel will open when one of the 10 links are clicked.

Thank you!
Insurance101.html
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
Ioannis ParaskevopoulosCommented:
Hi,

You may check an example in jsfiddle.

The changes i made were:

1. In the menu i added as an href the id of the content you want to collapse, and also a class so i can handle them in js.
In example for the first one:
<a href="#collapse-One" class="expander" >The Basic Speed Law</a>

Open in new window


2. In js i add the following:
$('.expander').click(function(){
    var idToToggle = $(this).attr('href');
    $(idToToggle).collapse('toggle');
});

Open in new window


Hope it is what you were asking for,
Giannis
0
 
jayschAuthor Commented:
jyparask,

Your code works great from within the 'Insurance101.html' page - Thank you!

Is there a way for this to work from another page? Something like:  'Insurance101.html#collapse-One'

I need to link to the Insurance101.html page from other pages on the site. Both from the top drop-down nav bar as well as from simple links.

Thanks for you help.
0
 
jayschAuthor Commented:
Giannis,

This doesn't seem to work for me. I tried both your functions above to a page other than 'Insurance101.html but none of the panels open.

Wonder what I'm doing wrong?
0
 
Ioannis ParaskevopoulosCommented:
That code should go on Insurance101.html page. Then your anchors from another page should link to ie Insurance101.html#collapse-One
0
 
jayschAuthor Commented:
Giannis,

OK Got it. Everything works great! Thanks for you patience and help. I appreciate it.
0
 
jayschAuthor Commented:
I appreciate the help, solution works great!
0
 
Ioannis ParaskevopoulosCommented:
Glad to see it working.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.