Thursday, 8 August 2013

Link to specific accordion so it's open on load (bootstrap)

Link to specific accordion so it's open on load (bootstrap)

Okay so this is a little different than you might first think.
I'm using Bootstrap's accordion script for an FAQ page that sales staff
use. The sales staff want to be able to link to specific questions so the
specific answer is already open when the page is loaded.
I set it up so the sales staff could click a question to open it and then
copy the URL and provide that link to customers which looks like
www.example.com/page.htm#QuestionOne
And then I have some javascript that takes the hash from the url and adds
the class to the answer that makes it open:
var urlHash = window.location.hash.split('-')[0];
if (urlHash == '#QuestionOne')
$('#QuestionOne').addClass('in');
The problem with this is that the page scrolls to it, and due to some
other elements on the page (a fixed header) it doesn't display well. So I
want the link to NOT scroll to the anchor. So, I found some javascript for
that too:
if (location.hash) {
window.scrollTo(0, 0);
setTimeout(function () {
window.scrollTo(0, 0);
}, 1);
}
All is great so far! Works great in Chrome, but not in Internet Explorer!
The accordion opens but the page doesn't stay at the top. Sigh...
Yes, I have found solutions where the hash is actually something like
"#hash_QuestionOne" and then the "hash_" part is stripped out but then
that wouldn't allow the sales staff to grab the URL to share with
customers.
So in short, I need to be able to allow people to click an accordion to
open it (which then changes the URL to add a hash at the end) and then
they copy the URL, provide it to customers, and then the customers goes to
that URL which loads the page with the accordion already open and the page
does not scroll but stays at the top.

No comments:

Post a Comment