jQuery Collapsible Panel Plugin


Introduction

I just moved my website over to a Windows Azure hosted WordPress blog.  My Google Analytics statistics showed me that by far the most popular content from my old website (which was a ASP.NET site rather than just a blog) was this information about a jQuery Collapsible Panel Plugin that I created a long long time ago while learning jQuery.

So here is the post in case anybody wants to refer back to it.  If you accessed this page from it’s original URL, then hopefully you just got redirected to here.

Thanks!


Original Post

Yup, I know there are some collapsible panel plugins already available on the jQuery website.

Yup, I know that some of them probably do a lot more than this one! But I found myself requiring a really simple and reusable collapsible panel for something I’m working on. I have been starting to use jQuery more and more but hadn’t actually got around to creating a plugin.

So I figured this would be a great excuse!

I just wanted something where I could wrap my existing html/aspx page sections within a div, tell it what the title of the section is and it would just go ahead and turn that into a panel for me. Here is what I ended up with:

The Result

CollapsiblePanel

And here is the markup for that:

        

Lorem ipsum dolor sit amet, consectetur adipiscing elit.... (you get the idea!)

Oh and you need a quick jQuery select of any collapsible containers (there could be multiple on a page) and call collapsiblePanel(); for each of them:

Cool! So how’d you do that?

I’m glad you asked!
I decided to identify any collapsible panels by giving them the css class of collapsibleContainer. I then use the title attribute to define heading for the panel. So the steps involved are:

  1. Find any collapsible panel container and get the contents. Wrap the contents within a new div. I give this a class of ‘collapsibleContainerContent’ so its identifiable later on.
  2. Create a new div to hold the header text. Get the text to put in here from the container div’s title attribute.
  3. Assign an onclick event to the title container. Make this slideToggle() the contents div we just created (with class of ‘collapsibleContainerContent’).

Here is the complete javascript. Note that I also add in some jQuery UI styles. This means that if you are using a jQuery UI theme, then these collapsible panels will pick up the same styles (which is why my example ones have the cool blue gradient background!).

diQuery-collapsiblePanel.js

(function($) {
    $.fn.extend({
        collapsiblePanel: function() {
        // Call the ConfigureCollapsiblePanel function for the selected element
        return $(this).each(ConfigureCollapsiblePanel);
    }
  });
})(jQuery);

function ConfigureCollapsiblePanel() {
    $(this).addClass("ui-widget");

    // Check if there are any child elements, if not then wrap the inner text within a new div.
    if ($(this).children().length == 0) {
    $(this).wrapInner("
"); } // Wrap the contents of the container within a new div. $(this).children().wrapAll("
"); // Create a new div as the first item within the container. Put the title of the panel in here. $("
" + $(this).attr("title") + "
").prependTo($(this)); // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div. $(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick); } function CollapsibleContainerTitleOnClick() { // The item clicked is the title div... get this parent (the overall container) and toggle the content within it. $(".collapsibleContainerContent", $(this).parent()).slideToggle(); }

The $.fn.extend code is the stuff that lets me use this as a plugin. It allows us to call .collapsiblePanel() on the selected elements (which we do on document ready – see above).

I also created a stylesheet for a little bit tweaking. I don’t do a whole load of stuff in here… as I let the jQuery UI theme do most of the work. But you can change these to make it look how you want.

diQuery-collapsiblePanel.css

.collapsibleContainer
{
}

.collapsibleContainerTitle
{
    cursor:pointer;
}

.collapsibleContainerTitle div
{
    padding-top:5px;
    padding-left:10px;
}

.collapsibleContainerContent
{
    padding: 10px;
}

Here is a custom version of the css – for if you are not using a jQuery UI theme. It just gives you an idea of how to easily change the styling:

.collapsibleContainer
{
    border: solid 1px #9BB5C1;

}

.collapsibleContainerTitle
{
    cursor:pointer;
}

.collapsibleContainerTitle div
{
    padding-top:5px;
    padding-left:10px;
    background-color:#9BB5C1;
    color:#607882;
}

.collapsibleContainerContent
{
    padding: 10px;
}

Download

Here are the JavaScript and CSS files to download if you fancy a play:

8 thoughts on “jQuery Collapsible Panel Plugin”

  1. Hey awesome write up!!! Thanks for such quick and easy stuff to learn. How do I make it so its closed upon loading? I feel like something needs to go in the div but I’m still new. Thanks!

      1. Good stuff! Sorry for the delay, I’ve been away for work for the last week. How did you go about solving this?
        I know a few people came up with various solutions for this kind of scenario… when I get a sec I’ll try to collect together some samples and post an update.
        Thanks for your feedback, happy coding!

  2. Hey Darren,

    Thanks for the script. It was the needed inspirational spark for what I was doing. I also needed to start with the panel closed and so modified your script to add an id to that first div that you create inside of the ConfigureCollapsiblePanel function. Then I can target unique panels to provide further instruction, including a programmatic ‘click’ to toggle the panel closed.

    Here is a code snippet
    var inputID = this.id + “CPWidget”;
    $(“” + $(this).attr(“title”) + “”).prependTo($(this));

    And then to call it by its unique id -
    $(‘#WhateverPanelDivCPWidget’).trigger(‘click’);

    Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>