Expand-collapse toggle panel (div) using jquery

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

If you want to learn more about jQuery then you can check the following books and buy them.I really recommend the book “jQuery in Action” for starting your way for jQuery.

Learning Jquery: Better Interaction Design and Web Development with Simple JavaScript Techniques


Jquery in Action

77 thoughts on “Expand-collapse toggle panel (div) using jquery

  1. Relatively new to jQuery so I’m aware my request may be very simple.

    How can I tweak the script so all Headers are expanded and then if the user wants he/she can toggle then open or closed.

    TIA.

  2. Relatively new to jQuery so I’m aware my request may be very simple.

    How can I tweak the script so all Headers are expanded and then if the user wants he/she can toggle them open or closed.

    TIA.

  3. Hey, it’s very helpful for newbie..
    thank you Oscar.

    http://www.zamshed.info/tech/

  4. The article is very use
    The text inside content part is unsearchable by the browser.

  5. Michael

    You can collapse all divs by targeting them directly:

    $(“#hide_all”).click(function()
    {
    $(“.div1″).hide();
    $(“.div2″).hide();
    $(“.div3″).hide();
    });

  6. @Michael
    jQuery means concise way; so, you can try it too:
    $(”.div1,.div2,.div3?).hide();
    If you design your project with more calm then you could add a generic class for all your collapsible DIVs (…, …, …); then you can try something more concise like:
    $(”.collapsible?).hide();
    results will be the same.

  7. ..sorry about later post misprints, I mean:
    $(”.div1,.div2,.div3″).hide();
    If you design your project with more calm then you could add a generic class for all your collapsible DIVs (<div class=”div1 collapsible”>…, <div class=”div2 collapsible”>…, <div class=”div3 collapsible”>…); then you can try something more concise like:
    $(”.collapsible”).hide();

  8. Nice one. Thanks for the share.

  9. Plvkas

    Hi,
    I have the div tag to be collapsed under a asp update panel(ajax), after the update panel is updated the div is not collapsing. I tried debugging it but the click event itself does not fire.
    Please help me.

  10. Chad Sharpe

    thanks for this, it works great! this remixed code allows only one open .body open at a time…

    $(document).ready(function(){
    //hide the all of the element with class msg_body
    $(“.body”).hide();
    //toggle the componenet with class msg_body
    $(“.head”).click(function(){
    if ( $(this).next(“.body”).is(‘:visible’) ) {
    $(“.body”).hide();
    } else {
    $(“.body”).hide();
    $(this).next(“.body”).slideToggle(250);
    }
    });
    });

  11. Hi,

    I want to add two links at the top which will say “Collaps all” and “Expand All”. Please can anybody provide me the additional code for it?

    Thanks,

  12. Unfortunately, whilst this is simple and easy to setup for IE 7 & 8 it is not compatible with Internet Explorer 6. I realise IE 6 is a worthless piece of crap but sadly, many people are still using it. Have you considered tweaking the code to work on IE6?

  13. fee

    @Ben Frain,

    have you even tried this in IE6 because it works perfect for me in IE6

  14. this is better

    $(document).ready(function(){
    $(“.msg_body”).hide();
    $(“.msg_head”).click(function(){
    $(this).next(“.msg_body”).slideToggle(“normal”);
    });
    });

  15. Eyal

    Hi, awesome example thank you.

    I’m trying to make this work inside a table, where clicking a title row will open up a description row under it, but once you put the DIV inside a TD, the whole thing doesn’t work…

    Any ideas? thank you

  16. Yep

    This is great, simple, easy right to the point. Ben there are about 12% of users, today, using IE 6, what an unfortunate circumstance that really is, however, the percentage of users keep dropping quickly.

  17. kaf

    Very simple and fantastic piece of code.
    I am a newbie to jquery. Is there a way of loading the msg_body from a text or php file using ajax.

    Thanks

  18. cryx

    And oh, I saw that I’ve written without “.” on the other divs, well I tried that and same problem.

  19. Rodrigo

    Roshan, i love your code, tell me, can i put blogger widgets inside?
    like:

    Header-1

    ONE WIDGET HERE!

    Header-2

    ANOTHER WIDGET HERE.

    Header-3

    PLEASE, ONCE MORE HERE!

    ps. sorry about my bad english…

Comments are closed.