How to link directly to an FAQ option expanded

Question

I was wondering if you could give me some ideas on how I can do this. What we are looking to do is link directly to a question in our FAQ page. Currently our FAQ questions are being hidden via jQuery like so:

$(document).ready(function() {
    $('.answer').each(function() {
        $(this).css("display", "none");
    });
    $('.question').click(function() {
        $(this).next('.answer').slideToggle("fast")
        return false;
    });
});

We would like to link to a specific question but have that question expanded.

Answer 1

You could use the hash value in the url to mark what faq to show in the ready function. Mark every FAQ with an id that connects it to the hash value. Access the hash value through window.location.hash and then show only the FAQ that matches the hash value.

Example:

http://mypage.com/faq.html#faq1 would connect with your faq marked with an id="faq1"

Answer 2

Set an ID or a name for each of the answers and use JS to check on page load if a hash tag is set, and open up the question accordingly:

(function(hash){
    if (hash !== undefined && hash.substring(0,1) === "#") {
     $(hash).slideToggle("fast"); 
    }  
})(window.location.hash);

example: http://jsfiddle.net/wSRyP/

And you would link to them using the #hashtag:

http://fiddle.jshell.net/78Udw/show/light/

Answer 3

I would pass the quetsion section in the URL as a hash, e.g. url/faq.html#question1

Then using some javascript, you could check for the hash, then scroll the user to the section and toggle the slide.

$(function(){
  if(window.location.hash) {
    // Fragment exists
    // use hash value to match an attribute in the question.
    // scroll to Q/A and toggle.
  }   
});