The collapsing effect

Collapsing the panels is the easy bit and just like every other ‘accordion’ and ‘collapsing panel’ plug-in can be achived with a simple toogle() function to slide the ‘ul’ inside each of the widgets when the ‘h2′ is clicked. The jQuery for that would look like this…

Notice how we use .next(“ul”) to target the ‘ul’ as it immediately precedes the ‘h2′ which is the trigger for the effect. So far so good!

Next we need to add an ‘active’ class to the ‘h2′ on DOM ready so the user can see the state of the panels when the page loads, hopefully prompting them they can close it. When they click it we just remove the active ‘class’. This is really easy too by adding this….

Here’s the CSS for the state change….

Pretty standard stuff! Now comes the interesting bits!

Baking the cookies!

First off I downloaded jQuery.cookies.js. This is a great jQuery plug-in for dealing with cookie operations. The basics of it are….

The problem is that all the tutorials for collapsing panels with cookies only dealt with one panel!..and one cookie! But I have multiple panels that need to have their states saved in multiple individual cookies! As Clay Davis from ‘The Wire’ would say,”SSSHHHIIIIIIIIIIIIIIIT!”.

Making unique cookies

So…first I needed to find the index of the widget I’d collapsed and store it’s state in an it’s own unique cookie. Finding the index or number of the widget can be done with this line…

Now we can create some variables to store unique cookie names and values. Here’s how we do that….

Deleting the cookies

To delete the cookie when widget one is clicked or ‘toogled’ we do this…..

The whole code for this looks like this…..

Getting the cookie values

Now we have to retrieve the cookies and their values to set the state of the widgets when the page is reloaded. This is easily achived using a for loop with an if statement inside it.

First were going to add a line to see how many widgets we have so we know how long the loop should be. I’ve also created a variable to define the ‘ul’ as ‘panel’. If you have nested lists you may want to add :first to the selector.

I’ve done this for any widget that has a title or ‘h2′ tag. Some widgets like ‘text’ or ‘RSS’ widgets you may want to leave out. This is optional….

Heres the loop with some comments. c=0 is important it’s the loop index.

If the loop finds a cookie with the name ‘panel0′ it will return a value of ‘closed0′ which tells the if statement to hide the widget ‘ul’ with an index of 0 and remove the ‘active’ class and add a class of ‘inactive’ on page load.

When the page loads any widget that has an ‘h2′ with the class ‘inactive’ will be hidden as it doesn’t have the class ‘active’…….Great!

Major Problem!!!

…..or not! Just like Microsoft there is one massive flaw in this code!!! I’d like to add that up to here took about an hour, what follows took a whole day!

The toogle() function works on the premise that the first part of the code (the first ‘click’ function) will slide the element UP and the second part (the second ‘click’ on the element) will slide the element DOWN. Well what if the element is already UP on page load. Clicking the trigger returns nothing as the element is already UP…?!? You need to click it again to get it to slide down which from a UI point of veiw it pretty…well, crap!

I tried so many different things from ‘if else’ statements to ‘click’ functions, the list goes on. It seemed if one thing worked something else wouldn’t. It was like a dream that you’re chasing something but can never catch up with it. At one point I thought I was losing my mind!

The answer turned out to be really simple in the end (Doh!) an lay in something I’d added to the code but never thought of using… the ‘inactive’ class. I discovered that if I duplicated the toggle() function and reversed the functions so the first click performed a DOWN slide and assigned that to $(‘li.widget h2.inactive’) it produced the desired result. Not very elegant but then neither am I!

The whole thing looks like this….

Conclusion

Multiple collapsable panels with cookie states for every unique panel. Awesome!!!

I hope somebody finds this useful and is spared the brain ache I went through. To coolest thing is as the demo relies on Wordpress’ markup you can drop it straight into a theme your developing. I’m going to turn it into a plugin soon too (once I’ve figured out how to do that!). I’d love to hear if any knows of a better and more elegant way of doing this, so leave a comment if you do!

For a demo, look no further than the sidebar menu at the top of this page. Close some widgets and reload the page!

$("#box1").fadeIn("slow", function(){

  $("#box2").fadeIn("slow", function(){

    $("#box3").fadeIn("slow", function(){

      $("#box4").fadeIn("slow", function(){

        $("#box5").fadeIn("slow");

      });

     });

   });

});

…… you can instead give them a class of ‘box’ and find the amount using .length; and use an if statement to loop through the until all the relevant elements are visible using a callback function.

var i = 0

var n = $(".box").length;

        

function showbox() {

        

    if(i <= n){ 

            

    $(".box").eq(i).fadeIn(600, function(){ i++; showbox(); });

              

            }        

        } showbox();

It’s a lot more efficient code wise and produces the same effect. Here’s the same thing but using a ‘click’ event to trigger the function.

var j = 0

var a = $(".list").length;

        

    $("#trigger").click(function showlist(){

                

        if(j <= a){             

        $(".list").eq(j).fadeIn(200, function(){ j++; showlist(); });

              

         }       

    });

Might be a nice effect for a menu? I was going to use it to fade in the posts on the blog homepage but IE7 can’t render one transparent PNG over another when faded. It comes out looking like a jaged GIF with the top PNG’s transparent pixel looking black instead. Once again IE ruins everything!!!

View Demo