Multiply Nested Accordions from jQuery Tools.

So todays challenge was quadruply nested accordions using jQuery tools tabs accordion (http://jquerytools.org/demos/tabs/accordion.html). Also I implemented toggling of each tab individually. To see a demonstration visit this JSFiddle page http://jsfiddle.net/Xanetia/8kz4m/, or download the full source code here: http://www.mediafire.com/?cfi8m4lfp0ji60u. Heres The HTML:

<div class="accordion">
 <h2>Level 1:1</h2>
 <div class="pane">
  <div class="accordion">
   <h2>Level 2 : 1</h2>
   <div class="pane">
    <div class="accordion">
      <h2>Set 1</h2>
      <div class="pane">
       <div class="accordion">
        <h2>Test3</h2>
        <div class="pane">
[Pane Content]

That’s the basic format – I’m sure your capable of closing the tags off! Now onto the interesting part, the jQuery bit, as follows:


//Initialising Accordion
$(".accordion").tabs(".pane", {tabs: '> h2', effect: 'slide', initialIndex: null});

//The click to hide function
$(".accordion > h2").click(function(){
 if($(this).hasClass("current") && $(this).next().queue().length == 0){
  $(this).next().slideUp();
  $(this).removeClass("current");
 }else if(!$(this).hasClass("current") && $(this).next().queue().length == 0){
  $(this).next().slideDown();
  $(this).addClass("current");
 }
});

The first line is the standard jQuery tools accordion caller, the parts to note are that the identifiers are classes. The most important part is:

tabs: '> h2'</span>

This is what prevents clicking on a nested tab changing all levels. Pretty neat and simple!

In the click to hide part the issue is that we are not actually changing what is stored in jQuery as the current index, this is why we both hide and show it. The boolean test


$(this).next().queue().length == 0

Checks to see if the jQuery tools default event has fired (this one is evaluated after) stopping the opened/closed tab from just reverting to its previous state.

That’s all, any questions leave me a comment!

About Simeon Cheeseman

I enjoy a wide variety of computer and board games, have a BSc in Computer Science and have played percussion for 18 years.

Posted on January 10, 2011, in HTML, jQuery, jQuery Tools. Bookmark the permalink. 4 Comments.

  1. You should supply a download link which includes all the working files.

  1. Pingback: Multiply Nested Accordions from jQuery tools with empty bits! « A Programming Gamer's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: