Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    </head>
    <body>
        <section class="collapsibleGroup">
            <div>
                <h3>Heading 1</h3>
                <div class="hiddenContent">
                    <ol>
                        <li>line 1</li>
                        <li>line 2</li>
                    </ol>
                </div>
            </div>
            <div>
                <h3>Heading 2</h3>
                <div class="hiddenContent">
                    test
                </div>
            </div>
        </section>
    </body>
</html>
 
(function($) {
                $.collapse = function( el, options ) {
                    var base = this;
​
                    base.$el = $(el);
​
                    base.init = function() {
                        base.$hideable = base.$el.find('.hiddenContent');
                        base.$trigger = base.$el.find('h3');
​
                        base.$hideable.hide();
                    };
​
                    base.init();
​
                    base.$trigger.on('click', function(e){
                        var $clicked = $(this);
                        var isVisible = ($clicked.next('div.hiddenContent').is(':visible')) ? true : false;
​
                        base.$hideable.slideUp(300);
                        base.$hideable.promise().done(function(){
                            if(!isVisible) {
                                $clicked.next('div.hiddenContent').slideDown(300);
                            }
                        });
                    });
                };
​
                $.fn.collapse = function(options) {
                    return this.each(function() {
                        (new $.collapse(this, options));
                    });
                };
            })(jQuery);
​
            $('.collapsibleGroup').collapse();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers