Creating jQuery Expand Collapse Panels In HTML

Creating jQuery Expand Collapse Panels In HTML

The jQuery Expand Collapse Panels are used in breaking content rich pages into different sections thus allowing visitors to navigate easily to a particular section if they wish. These panels allow a user to click the arrow to reveal the content beneath them. In some place or the other the web developers see the need to include these Expand Collapse Panels in their website.

In this tutorial we will explain how to create a simple but powerful Expand Collapse Panels using just a few lines of jQuery and CSS. We create 3 expandable panels for 3 states of United States of America. When the user clicks the arrow in front of them the corresponding state panel will expand revealing the cities of the state. On clicking the arrow again the panel will collapse.

HTML

<div class="mainDiv">
    <div class="expandableCollapsibleDiv">
        <img src="Image/up-arrow.jpg" />
        <h3><a>NEW YORK</a></h3>
        <ul>
            <li><a>Albany</a></li>
            <li><a>Buffalo</a></li>
            <li><a>Kingston</a></li>
            <li><a>Tonawanda</a></li>
            <li><a>Sherrill</a></li>
            <li><a>Sherrill</a></li>
            <li><a>Oneida</a></li>
        </ul>
    </div>
    <div class="expandableCollapsibleDiv">
        <img src="Image/up-arrow.jpg" />
        <h3><a>CALIFORNIA</a></h3>
        <ul>
            <li><a>Alameda</a></li>
            <li><a>Bell</a></li>
            <li><a>Banning</a></li>
            <li><a>Campbell</a></li>
            <li><a>Fresno</a></li>
            <li><a>Galt</a></li>
            <li><a>Jackson</a></li>
        </ul>
    </div>
    <div class="expandableCollapsibleDiv">
        <img src="Image/up-arrow.jpg" />
        <h3><a>WASHINGTON</a></h3>
        <ul>
            <li><a>Asotin</a></li>
            <li><a>Bellingham</a></li>
            <li><a>Bothell</a></li>
            <li><a>Camas</a></li>
            <li><a>Clarkston</a></li>
            <li><a>Cheney</a></li>
            <li><a>Newport</a></li>
        </ul>
    </div>
</div>

Inside the main div we have created 3 Expand Collapse div. We have given them the class ‘expandableCollapsibleDiv’. The name of the state is placed in the h3 tag while an arrow (an image file) is shown just in front of it. Clicking the arrow will open or close the city panels. We have made the city panels which acts as Expand Collapse panels in ‘ul’ tag.

CSS

body {
    margin: 0 auto;
    width: 500px;
}

.mainDiv {
    font-family: Verdana;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 5px;
}

.expandableCollapsibleDiv img {
    cursor: pointer;
    margin-right: 10px;
    margin-top: 5px;
    padding-left: 10px;
    float: left;
}

.expandableCollapsibleDiv ul {
    border-bottom: 1px solid #000;
    clear: both;
    list-style: outside none none;
    margin: 0;
    padding-bottom: 10px;
    display: none;
}

Just a few lines of CSS to provide proper styling to our Expand Collapse Panels.

<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.expandableCollapsibleDiv > img').click(function (e) {
            var showElementDescription = $(this).parents('.expandableCollapsibleDiv').find('ul');
             if ($(showElementDescription).is(':visible')) {
                showElementDescription.hide("fast", "swing");
                $(this).attr("src", "Image/up-arrow.jpg");
             } else {
                showElementDescription.show("fast", "swing");
                $(this).attr("src", "Image/down-arrow.jpg");
             }
        });
    });
</script>

How jQuery Collapse Works

The jQuery code brings the Expand Collapse Panels to work. We have created a click event of the ‘img’ tag placed inside ‘expandableCollapsibleDiv’. The click event code checks if the ‘ul’ element of the ‘expandableCollapsibleDiv’ is Expand i.e. visible or not. If it is visible then ‘showElementDescription’ div is Collapsed (hidden) and up-arrow is shown.

How jQuery Expand Works

In the same way if the ‘ul’ element of the ‘expandableCollapsibleDiv’ is Collapse i.e. hidden then it is changed to Expand i.e. show and the arrow is changed to down one.

In this way we can create jQuery Expand Collapse Panels very easily and use them in our web pages.

DEMO DOWNLOAD

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.