Collapsible Panel

HTML

<aside id="secondary" class="col-md-3 col-sm-3">
    <div class="row">
        <!-- .widget STARTS -->
        <div class="widget">
            <div class="widget-inner">
                 <h3 class="">Panel 1</h3>

                <div id="code" class="widget-content">
                    <p>Some content 1</p>
                </div>
            </div>
        </div><br>
        <!-- .widget ENDS -->
        <!-- .widget STARTS -->
        <div class="widget">
            <div class="widget-inner">
                 <h3 class="widget-title">Panel 2</h3>

                <div id="store" class="widget-content">
                    <p>Some content 2</p>
                </div>
            </div>
        </div>
        <!-- .widget ENDS -->
        <!-- .widget STARTS -->
        <div class="widget">
            <div class="widget-inner">
                 <h3 class="widget-title">Panel 3</h3>

                <div id="books" class="widget-content">
                    <p>Some content 3</p>
                </div>
            </div>
        </div>
        <!-- .widget ENDS -->
    </div>
</aside>

CSS

#secondary .widget-title {
    margin: 0;
    font-size: 22px;
    background: #eee;
    padding: 10px;
    cursor: pointer;
}
#secondary .widget .widget-content {
    display: none;
}
#secondary .widget.active .widget-title, #secondary .widget.active ul {
    background: #666;
    color: #fff;
}

JavaScript

/********* 

This code is part of an article.
Title: 	"The Simplest Way to Create Collapsible Panel with jQuery"
URL:	http://teckstack.com/jquery-collapsible-panel

*******/
(function ($) {
    $("#secondary").on('click', '.widget-title', function (e) {
        $(this).next('.widget-content').toggle(200);
        $(this).parents('.widget').toggleClass('active');
    });
})(jQuery);