jQuery Collapsible Panel Plugin

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

And here is the markup for that:

        
<div class="collapsibleContainer" title="Example Collapsible Panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.... (you get the idea!) </p>
</div>
         

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:

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $(".collapsibleContainer").collapsiblePanel();
    });
</script>                
         

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("<div></div>");
    }    
    
    // Wrap the contents of the container within a new div.
    $(this).children().wrapAll("<div class='collapsibleContainerContent ui-widget-content'></div>");
    
    // Create a new div as the first item within the container.  Put the title of the panel in here.
    $("<div class='collapsibleContainerTitle ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").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:

• diQuery-collapsiblePanel.js
• diQuery-collapsiblePanel.css
• You will also need the main jQuery script. Get that at www.jquery.com

I have also recently added this plugin to the jQuery website. So you can check here for the downloadable package, along with comments, release history and bug fixes. http://plugins.jquery.com/project/SimpleCollapsiblePanel

Comments

If you have any comments on this then please check out my associated jQuery Collapsible Panel Plugin blog entry and leave your feedback on there. Cheers!