Creating jQuery Expand Collapse Panels In HTML with “minimum” codes

Creating jQuery Expand Collapse Panels In HTML with “minimum” codes

The jQuery Expand Collapse Panels are used in breaking content rich pages into different sections. So they allow 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. Sometimes developers see the need to include these Expand Collapse Panels in their website therefore they will find this tutorial useful.

In this tutorial I will explain how to create a simple & powerful jQuery Expand Collapse Panels, using just a few lines of jQuery code with little CSS.

I will create 3 expandable panels for 3 states of United States of America. When a user clicks the arrow, given 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 I have created 3 Expand Collapse divs. I have given them the class expandableCollapsibleDiv. The name of the state is placed in the h3 tag while an arrow (which is an image file) is shown just in front of it.

Clicking the arrow will open or close the city panels. I 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.

jQuery

<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 Panel Works

The jQuery code makes this Expand Collapse Panels to work. I have created a click event of the img tag, which is placed inside expandableCollapsibleDiv.

In the click event the code checks if the ul element of the expandableCollapsibleDiv is Expanded i.e. visible or not.

If it is visible then showElementDescription div is Collapsed (hidden) and up-arrow is shown.

How jQuery Expand Panel Works

In the same way if the ul element of the expandableCollapsibleDiv is Collapsed i.e. hidden, then it is changed to Expanded i.e. shown 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.