A href to open page with jquery and make certain div expanded

Question

Asking for help.

We use this script on our site's FAQ page: http://jsfiddle.net/ApCGU/

By default divs p_9, p_10, p_11, p_12.. are collapsed. Can i write the a href in a way that a certain div is already as expanded when user gets to page:

Current code:

<a href="faq.aspx">FAQ</a>

Wished:

<a href="faq.aspx#p_9">FAQ question 9</a>
<a href="faq.aspx#p_10">FAQ question 10</a>

Just adding the anchor doesn't appear to be working here.

Answer 1

You can get hash from url and toggle slide by using that like;

$(document).ready(function() {
    var hash = window.location.hash;// Returns e.g. "#p_9"
    $(hash).slideToggle();
});

Here is jsfiddle for code part, and here is jsfiddle demo(Press ctrl+f5 when you goto demo page in order to see it is working).

Answer 2

You can pass the value of the div that should open to the page via a URL parameter (or localStorage) and then display the div when the page loads, or after a short delay.

http://jsfiddle.net/philsinatra/8ppqg/1/

/**
 * pass this value as a URL parameter or through localStorage/cookie
 * @type {String}
 */
var defaultOpen = '9'; 

$(document).ready(function() {
  var t = setTimeout(function() {
    P_Expand(defaultOpen);
  }, 1000);
})