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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.