jQuery as Structure - Accordion Navigation

With the power of the jQuery UI, you can use widgets to quickly build a web site structure.

Part 2

With the Accordion and Tabs in place forming the basic web page structure, it’s time to figure out how things are going to work – how will the Accordion behave.  For instance, clicking on the main heading to see what the actual links are can be one click too many for a visitor.  So, how about using the jQuery mouseover event to open the Accordion headings.  This is simple jQuery statement as follows:

     $("#accordion").accordion({ event: "mouseover" });

This seems to work nicely for quickly opening the accordion to get to the real links. See demo.

Next issue: what should be happening with the Tab widget when I click on a link in one of the Accordion sections? Well, that will be my next post.

Also, for those wanting to know more about the Accordion widget used as navigation, you can check out the excellent docs at the jQuery UI Wiki