26 Nov 2011

jQuery Collapsible Panel Plugin

10 Comments JavaScript

One of the things I find myself constantly doing with jQuery is making divs expand and collapse based on clicks on other elements. Collapsible panels are a great way of achieving progressive disclosure. I got sick of writing the same code on multiple pages so I wrote a plugin instead.

This creates an accordian style header which expands a linked panel when clicked.

Demo
Download on GitHub

(function ($) {
    $.fn.extend({
        collapsiblePanel: function () {
            $(this).each(function () {
                var indicator = $(this).find('.ui-expander').first();
                var header = $(this).find('.ui-widget-header').first();
                var content = $(this).find('.ui-widget-content').first();
                if (content.is(':visible')) {
                    indicator.removeClass('ui-icon-triangle-1-e ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
                } else {                                       
                    indicator.removeClass('ui-icon-triangle-1-e ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-s');
                }
 
                header.click(function () {
                    content.slideToggle(500, function () {
                        if (content.is(':visible')) {
                            indicator.removeClass('ui-icon-triangle-1-e ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
                        } else {                                       
                            indicator.removeClass('ui-icon-triangle-1-e ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-s');
                        }
                    });
                });
            });
        }
    });
})(jQuery);

You also need a set structure for your panel (below).

<div class="ui-widget collapse">
    <div id="expander-demo-control" class="ui-widget-header">
        <span class="ui-icon ui-expander floatLeft">+</span>
        <span style="display: inline">Lime49 Expandy Widgets Inc.</span>
    </div>
    <div id="expander-demo" class="ui-widget-content">
        <p>Snap! the overstrained line sagged down in one long festoon; the tugging log was gone.</p>
 
	<p>"I crush the quadrant, the thunder turns the needles, and now the mad sea parts the log-line. But Ahab can mend all. Haul in here, Tahitian; reel up, Manxman. And look ye, let the carpenter make another log, and mend thou the line. See to it."</p>
 
	<p>"There he goes now; to him nothing's happened; but to me, the skewer seems loosening out of the middle of the world. Haul in, haul in, Tahitian! These lines run whole, and whirling out: come in broken, and dragging slow. Ha, Pip? come to help; eh, Pip?"</p>
    </div>
</div>

Call it using:

$().ready(function () {
    $('.collapse').collapsiblePanel();
});
Tags: , , ,
written by
The author didn‘t add any Information to his profile yet.

10 Responses to “jQuery Collapsible Panel Plugin”

  1. Reply Viktoriya says:

    Hi, Harry! I like your plugin:) Is there an option to have all the panels collapsed by default?
    Thanks in advance!

  2. Reply Harry Jennerway says:

    Sure. Just add

    content.css('display','none');

    before

    header.click(function () {
  3. Reply wendell says:

    Hi Harry, This is great article! Got question. What if I want the title to be dynamic

    for example. I would add the following (Show details…) or (Hide details…) when the item is collapsed or not. How do I accomplish this? Thank you!

    Lime49 Expandy Widgets Inc. (Show details…)

  4. Reply Krissy says:

    Thanks so much for creating this plugin, it works beautifully right out of the box. My only issue is…how do I go about utilizing it for more than ONE panel? In an effort to multiply the boxes it only displays the top panel and the ones below are left wide open. Is there a quick fix for this?

  5. Reply Top 5 jQuery Collapsible Plugins. - Pillaticos says:

    […] jQuery Collapsible Panel Plugin […]

  6. Reply DIGITALUnderworld says:

    Have you considered adding a Expand/Collapse All feature? I see a lot of request for those trying to use the standard jQuery Accordion plugin but it is not designed to do it. This would likely work better.

Leave a Reply