How can I open an accordion-styled grid on page load using jQuery?

Question

I’ve got two pages — let’s call them page A and page B.

Page A has 4 links going to page B.

On page B I’ve got an accordion-styled grid — see http://css-tricks.com/examples/InfoGrid/

I’m trying to get it so if I click on one of the links on page A it will open one of the tabs on page B.

Can anyone help me?! Cheers.

Answer 1

On page A, give each of the links a hash value that will match an ID of each accordion item on page B.

<a href='pageB.html#sectionOne'> Section One </a>
<a href='pageB.html#sectionTwo'> Section Two </a>
<a href='pageB.html#sectionThree'> Section Three </a>

Then on page B, Give each accordion item that you would click an ID that matches the hash values above.

(If one of them currently has an ID of "starter", change it to the ID you intend to use.)

<dt id="sectionOne" style="cursor: pointer; font-size: 14px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; ">
   Section One
</dt>
...
<dt id="sectionTwo" style="cursor: pointer; font-size: 14px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; ">
   Section Two
</dt>
...
<dt id="sectionThree" style="cursor: pointer; font-size: 14px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; ">
   Section Three
</dt>

Finally, in the infogrid.js file, replace this line:

$("#starter").trigger("click");

with this:

$(window.location.hash).trigger("click");

It will get the hash value from the location bar, and use it to trigger the click event on the proper accordion item.

---

EDIT:

As noted by @Tomas Lycken, you do probably want some default. You can either use the #starter ID provided ( then use that in the appropriate link ), or choose your own.

If you wanted #sectionOne to be the default, you could do this:

$( (window.location.hash || '#sectionOne') ).trigger("click");

This will use the hash value if there is one, or #sectionOne if not.

If you want to safeguard against invalid hash values, you could do this:

var $viewAtPageLoad = $( window.location.hash ).trigger("click");

if(!$viewAtPageLoad.length) {
    $('#sectionOne').trigger("click");
);