• Kushal Jayswal is a frontend developer from India. His expertise includes HTML5, CSS3, Sass, LESS, Responsive Web Design, JavaScript, jQuery, Twitter Bootstrap, Material Design, AngularJS, NodeJS, WordPress and Liferay Theming. He has founded TeckStack.com in 2011 to share his frontend knowledge with the community. His core interests focus on frontend, blogging, UI, UX and many others. He loves to talk on trending frontend technologies and successful blogging.

Simple Collapsible Panel with jQuery

jQuery Collapsible Panel

Collapsible panel is one of the most used components for a web project. It easily allows the user showing and hiding the content. Also, it saves the space on a web page. Most of the time it can be found on FAQ pages, but it can be used anywhere as per the need.

This article will focus on the easiest way to create a collapsible panel using jQuery. And to understand the code, you must have basic knowledge of HTML and jQuery.

There are many ways we can integrate the collapsible panel. If you are using the Bootstrap then you might choosing its JavaScript component. Also, many jQuery plugins available to download for quick use. But here I have created very simple code that may help you to create a simple jQuery collapsible panel for any project.

HTML

I believe in good readable code structure. So I am following below way, where we have a parent #secondary to control the hierarchy at its best. Further there is set of .widget with panel title and its relevant content.

<aside id="secondary" class="col-md-3 col-sm-3">
    <div class="row">

        <!-- .widget STARTS -->
        <div class="widget">
            <div class="widget-inner">
                <h3 class="widget-title">Panel 1</h3>

                <div id="code" class="widget-content">
                    <p>Some content 1</p>
                </div>
            </div>
        </div>
        <!-- .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>

jQuery

I have highlighted part in HTML code above, those we are going to manipulate with below jQuery code. Before jumping into below code, I would suggest to read this article to understand why we have used .on()  function instead of .click() .

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

CSS

Through CSS we are hiding the .widget-content class, which will be shown upon clicking on .widget-title .

#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;
}

Demo

This article is intent to be helpful to freshers in to front end development or UI development. Kindly share your thoughts area in comment below.