pr0g33k

jQuery Collapsible Panel

I recently had a need for a JavaScript-driven collapsible panel and noticed that jQuery doesn't have one. I investigated using a jQuery accordion but wasn't satisfied with what it took to get it a single accordion panel to work. So I created my own:

(function ($) {
    $.fn.extend({
        collapsiblePanel: function () {
            var s = document.createElement('SPAN');
            $(this).each(function () {
                var i = $(s), h = $(this).find('.ui-widget-header').first(), c = $(this).find('.ui-widget-content').first();
                if (h && c) {
                    i.text("+").css({ 'display': 'inline-block', 'margin-right': '10px' }).addClass('ui-icon ui-expander ui-icon-triangle-1-e');
                    c.css({ 'padding': '10px' }).hide();
                    h.prepend(i).css({ 'padding': '5px' }).click(function () {
                        c.slideToggle(250, function () {
                            c.is(':visible') ? i.removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s') : i.removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
                        });
                    });
                }
            });
        }
    });
})(jQuery);

The markup would look like this:

<div class="ui-widget collapsible-panel">
    <div class="ui-widget-header">Lorum Ipsum</div>
    <div class="ui-widget-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim pharetra ultricies. Nullam a nisl ligula. Integer at lacus a dui volutpat facilisis in at lacus. Mauris nec vestibulum ipsum. In hac habitasse platea dictumst. Vestibulum et justo at urna tempus porttitor et tincidunt dui. Pellentesque hendrerit consequat felis eu sodales. Donec tincidunt laoreet lacus dapibus ullamcorper. Duis ut rutrum orci, ultrices lobortis ipsum.</p>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('.collapsible-panel').collapsiblePanel();
    });
</script>

Enjoy!

Posted on 6/5/2015 at 06:06 PM , Edited on 6/5/2015 at 08:06 PM
Tags: jQuery

Comments:

Leave a comment
  1. CAPTCHA