Creating expandable & collapsible panels in jQuery, CSS & HTML

18 July, 2013 by Tom Elliott

The use of expandable and collapsible panels is widespread on the Internet. There are many plugins and code available that allow you to implement various types of expandable content or ‘accordion’ effects which essentially involve the user clicking on a panel heading to reveal the content underneath. Expandable panels are often used as a way to break up content rich pages into more visually appealing sections, where visitors can choose to read more about a particular section if they wish.

This tutorial walks through the processes and code required to create your own version of expandable panels using a mix of HTML, CSS and jQuery. Modifying and styling the panels is easy and the code has been tested on multiple browsers and devices including Internet Explorer 8, 9 and 10 as well as Chrome, FireFox and Safari. The expandable panels are also responsive and fit 100% of the parent container.

Take a look at the expandable panel demo to see what we will be replicating. There are 3 content panels which can be expanded and collapsed and an open/close icon to indicate the selected panel open/close state.

This code also has some optional parameters that can allow the following to be configured:

1. Accordion effect – allows the panels to be turned into a typical Accordion whereby selecting a closed panel will collapse any open panels.
2. Default open panel – selects which panel (if any) to expand as soon as the page is loaded
3. Panel speed – selects how fast to expand or collapse the panel content

The HTML

The HTML for the expandable panels is fairly straightforward. Each of the 3 panels has a container div with the class expandable-panel and unique ID specified by “cp-1”, “cp-2” etc, which the jQuery references. Within each of these panels is a heading div that contains the open/close icon and a content div which contains regular HTML.

<div id="container">
 	<div class="expandable-panel" id="cp-1">
    	<div class="expandable-panel-heading">
        	<h2>Content heading 1<span class="icon-close-open"></span></h2>
         </div>
    	<div class="expandable-panel-content">
        	<p>Panel HTML...</p>
        </div>
    </div>

    <div class="expandable-panel" id="cp-2">
    	<div class="expandable-panel-heading">
        	<h2>Content heading 2<span class="icon-close-open"></span></h2>
         </div>
    	<div class="expandable-panel-content">
        	<p>Panel HTML...</p>

        </div>
  </div>

  <div class="expandable-panel" id="cp-3">
     <div class="expandable-panel-heading">
         <h2>Content heading 3<span class="icon-close-open"></span></h2>
     </div>
     <div class="expandable-panel-content">
         <p>Panel HTML...</p>
     </div>
  </div> 

</div>

The CSS

The class for the main content expandable-panel-content has the margin-top initially set to -999 pixels. This is to avoid the content from being briefly shown before the page has loaded and the JavaScript has determines the height of the content panel and its position relative to its container.

The main expandable-panel class is given the overflow:auto; property which allows the panel to expand as the content div is revealed and will keep the content hidden when it is outside the div boundaries. This container also needs a minimum height setting so that its height isn’t determined by the negative value of the content panel.

The only image used in the CSS is the icon for the open/close status which you can grab here or recreate.

h2, p, ol, ul, li {
	margin:0px;
	padding:0px;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
}

#container {
	width:300px;
	margin:auto;
	margin-top:100px;
}

/* --------- COLLAPSIBLE PANELS ----------*/

.expandable-panel {
    width:100%;
    position:relative;
    min-height:50px;
    overflow:auto;
    margin-bottom: 20px;
	border:1px solid #999;
}
.expandable-panel-heading {
    width:100%;
    cursor:pointer;
    min-height:50px;
    clear:both;
    background-color:#E5E5E5;
    position:relative;
}
.expandable-panel-heading:hover {
    color:#666;
}
.expandable-panel-heading h2 {
    padding:14px 10px 9px 15px;
    font-size:18px;
    line-height:20px;
}
.expandable-panel-content {
    padding:0 15px 0 15px;
    margin-top:-999px;
}
.expandable-panel-content p {
    padding:4px 0 6px 0;
}
.expandable-panel-content p:first-child  {
	padding-top:10px;
}
.expandable-panel-content p:last-child {
    padding-bottom:15px;
}
.icon-close-open {
    width:20px;
    height:20px;
    position:absolute;
    background-image:url(icon-close-open.png);
    right:15px;
}
.expandable-panel-content img {
	float:right;
	padding-left:12px;
}
.header-active {
    background-color:#D0D7F3;
}

The jQuery

This is where the fun begins! There are 3 functions here. panelinit() initialises the expandable panels and sets the height and position for each panel content. We execute the initialisation function after the page has loaded, to give a chance for any images used within the panels to be loaded so the heights can be better determined.

The main expanding/collapsing function is called when a panel heading is clicked, and animates the margin-top style of the associated content panel to either zero or the starting position depending on whether the panel is open or closed.

The last function resetpanels() is called only if the accordion variable is set to true, which will collapse any existing open panels so only one panel can ever be fully expanded at once.

To change the animation speed, adjust the panelspeed variable (currently set to half a second). If you want a panel to be initially expanded when the page loads, specify the panel number with the defaultopenpanel variable. You will also need to specify the total panels being used using totalpanels.

(function($) {
    $(document).ready(function () {
        /*-------------------- EXPANDABLE PANELS ----------------------*/
        var panelspeed = 500; //panel animate speed in milliseconds
        var totalpanels = 3; //total number of collapsible panels
        var defaultopenpanel = 0; //leave 0 for no panel open
        var accordian = false; //set panels to behave like an accordian, with one panel only ever open at once      

        var panelheight = new Array();
        var currentpanel = defaultopenpanel;
        var iconheight = parseInt($('.icon-close-open').css('height'));
        var highlightopen = true;

        //Initialise collapsible panels
        function panelinit() {
                for (var i=1; i<=totalpanels; i++) {
                    panelheight[i] = parseInt($('#cp-'+i).find('.expandable-panel-content').css('height'));
                    $('#cp-'+i).find('.expandable-panel-content').css('margin-top', -panelheight[i]);
                    if (defaultopenpanel == i) {
                        $('#cp-'+i).find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
                        $('#cp-'+i).find('.expandable-panel-content').css('margin-top', 0);
                    }
                }
        }

        $('.expandable-panel-heading').click(function() {
            var obj = $(this).next();
            var objid = parseInt($(this).parent().attr('ID').substr(3,2));
            currentpanel = objid;
            if (accordian == true) {
                resetpanels();
            }

            if (parseInt(obj.css('margin-top')) <= (panelheight[objid]*-1)) {
                obj.clearQueue();
                obj.stop();
                obj.prev().find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
                obj.animate({'margin-top':0}, panelspeed);
                if (highlightopen == true) {
                    $('#cp-'+currentpanel + ' .expandable-panel-heading').addClass('header-active');
                }
            } else {
                obj.clearQueue();
                obj.stop();
                obj.prev().find('.icon-close-open').css('background-position', '0px 0px');
                obj.animate({'margin-top':(panelheight[objid]*-1)}, panelspeed);
                if (highlightopen == true) {
                    $('#cp-'+currentpanel + ' .expandable-panel-heading').removeClass('header-active');
                }
            }
        });

        function resetpanels() {
            for (var i=1; i<=totalpanels; i++) {
                if (currentpanel != i) {
                    $('#cp-'+i).find('.icon-close-open').css('background-position', '0px 0px');
                    $('#cp-'+i).find('.expandable-panel-content').animate({'margin-top':-panelheight[i]}, panelspeed);
                    if (highlightopen == true) {
                        $('#cp-'+i + ' .expandable-panel-heading').removeClass('header-active');
                    }
                }
            }
        }
       
       //Uncomment these lines if the expandable panels are not a fixed width and need to resize
       /* $( window ).resize(function() {
          panelinit();
        });*/

        $(window).load(function() {
 			panelinit();
        }); //END LOAD
    }); //END READY
})(jQuery);

Update 01/10/2013: Added ‘header-active’ class to highlight the heading of any active and open panels. This can be turned off by setting highlightopen to false

Update: 07/08/2014. Added resize function for responsive expandable panels that don’t have a fixed width. Just uncomment the $(window).resize function in the jQuery above

 

---

---