Expand-collapse toggle panel (div) using jquery

Posted on March 25, 2008
Filed Under how-to, javascript, jquery, tutorial

In this post, I’ll show you how easy it is to show expandable and collapsible toggle panel using jQuery. When you click on the heading, the content gets displayed by sliding and when you again click on the heading again, it gets collapsed.

View LIVE DEMO

Now let’s look at the html code,

<div class="msg_list">
<p class="msg_head">Header-1 </p>
<div class="msg_body">
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
<p class="msg_head">Header-2</p>
<div class="msg_body">
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
<p class="msg_head">Header-3</p>
<div class="msg_body">
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
</div>

As you can see above, the whole message panes contained inside the div with class name “msg_list”. And, the header element where you click is defined with the class “msg_head” and after that there is element with class “msg_body” which contains the message or text which is expandable or collapsible.

Now let’s look at the CSS attributes of these three classes,

p {
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 383px;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFCCCC;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}

Now, let’s look at the JavaScript code to make the pane toggling i.e collapsible and expandable,

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script>

As you can see above, first of all jQuery framework is used. After that, all the element with the class name “msg_body” is collapsed when the page is loaded. And you can see, the “slideToggle()” function of jQuery is used to expand and collapse the “div” with class “msg_body”. When user clicks on the element with the class “.msg_head”, then div with class “msg_body” next to it, gets toggled with sliding effect, making toggle panel using jQuery.

Download Full Source Code

Popularity: 33% [?]

If you like this post then please subscribe to my full RSS feed . You can also subscribe by email and have new posts sent directly to your inbox.And, You can also follow me on twitter at http://twitter.com/roshanbh.

» How to make accordion using jquery and css
» Jquery : Benefits, Examples and Free Ebook
» How to make accordion menu using jquery
» jQuery is the most popular JavaScript and Ajax Framework

Comments

9 Responses to “Expand-collapse toggle panel (div) using jquery”

PHP Coding School » Blog Archive » php tips [2008-03-25 11:58:07] on March 25th, 2008 12:04 pm

[...] Collapsible and expandable toggle pane using jquery By Roshan In this post, I’ll show you how easy it is to show expandable and collapsible toggle panel using jQuery. When you click on the heading, the content gets displayed by sliding and when you again click on the heading again, … Roshan Bhattarai’s Blog - PHP… - http://roshanbh.com.np [...]
How to make collapsible accordion using jquery and css on April 2nd, 2008 6:48 pm

[...] time I’ve written an article about how to make expand-collapse toggle panel using jQuery. Now, this time I’ll show you how to make collipsible accordion using jQuery.An [...]
Oscar on May 16th, 2008 7:32 pm

Hi Roshan, nice article. The expand effect looks horrible but it’s just because all “msg_body” height divs are too small for an -in this case- long effect duration time. For those readers who are looking for a way to better this example (repeat it’s a good stuff but for highers divs) you can try this:

$(document).ready(function(){
$(”.msg_body”).hide();
$(”.msg_head”).toggle(function(){
$(this).next(”.msg_body”).slideDown(100);
}, function(){
$(this).next(”.msg_body”).slideUp(300);
});
});

With shorter times for expanding divs, the effect looks better. My script isn’t so concise as Roshan’s, but it could be useful for some cases.
Greetings from Peru to all.
Roshan on May 17th, 2008 7:08 am

hi oscar..thanks for posting that comment..you are right shorter interval can be better than the current one..

well it’s just the example for toggle panel and anyone can modify this script according to their need…
dave on May 25th, 2008 6:14 am

Works amazing, thanks for this!
abubin on July 4th, 2008 7:02 am

good and simple tutorial but what if I want the header to be at bottom?

Meaning I click on the msg_head and msg_head will scroll down revealing the msg_body on top of it. Like the 180 degree turn on example above.
chris on July 10th, 2008 12:46 am

Dear god i love you. i tried 4 different sites’ examples, none of which worked on my css jscript flash riddled mess of a site. thank you so much
Roshan on July 10th, 2008 4:29 am

wow!!!!…what a nice compliment….thanks dude.
JQuery - Expand/Collapse and Autopopulating Select Boxes « Coldfusion Yummy Mummy on July 17th, 2008 5:03 am

[...] Url for Expand Collapse DIv - http://roshanbh.com.np/2008/03/expandable-collapsible-toggle-pane-jquery.html [...]