Expand-collapse toggle panel (div) using jquery

Advertisement

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

Popularity: 82% [?]

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

Related Posts

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

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

  • Oscar wrote on 16 May, 2008, 19:32

    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 wrote on 17 May, 2008, 7:08

    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 wrote on 25 May, 2008, 6:14

    Works amazing, thanks for this!

  • abubin wrote on 4 July, 2008, 7:02

    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 wrote on 10 July, 2008, 0:46

    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 wrote on 10 July, 2008, 4:29

    wow!!!!…what a nice compliment….thanks dude.

  • Jamy wrote on 28 August, 2008, 7:56

    Hi Roshan,
    Nice Example, and very much useful.

    How can we add collapse and expand images in the “msg_head” class?

    I badly need it. Can you please help me out?

  • Roshan wrote on 28 August, 2008, 9:30

    @Jamy – for this you can use css() function of jquery framework..look at this where I’ve did that…

    http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

  • Jamy wrote on 29 August, 2008, 7:59

    Thanks Rosahn. I have a different senorio with me to hide / show selective div’s.

    I want to hide or show using the id of the div. which is not working / not giving any error.

    Fragment of my code is attached.
    thanks in advance.

    $(document).ready(function()
    {
    for (var i = 0; i < collapseArr.length; i++) {
    if (collapseArr[i] == ‘Y’) {
    $(“#category_body[" + i + "]“).hide();
    }
    }
    });

    function toggleCategory(categoryId) {
    $(“#category_body[" + categoryId + "]“).slideToggle(600);
    }

  • Oscar wrote on 4 September, 2008, 5:18

    Hi Roshan, every time your code is more and more compact, bravo! Now I want contribute too with these lines:

    $(‘.msg_list’).click(function(e){
    if ($(e.target).is(‘.msg_head’))
    $(e.target).next(‘.msg_body’).slideToggle(250);
    });

    It’s the same with a nice difference: it use event delegation, so if you add new content (example: via ajax) all newies will come with the toggle propertie, yeah, without need to call the declaration again and again. Event delegation is more efficient using PC resources too.

  • Roshan wrote on 4 September, 2008, 5:50

    @Oscar – great code dude..cheers for you…
    thanks for sharing it with us…..

  • Krystal wrote on 13 October, 2008, 18:28

    Thank you so much for this. Simple, concise and effective. You rock.

  • Oscar wrote on 17 October, 2008, 22:15

    Hi Roshan and hi everybody! I just developed a project using horizontal scrolling panels so in the spirit of jQuery, I decided to share it with you. You can find the example here:

    http://oscaralderete.com/hscrolling

    I guess you can find useful it.
    Regards

  • Roshan wrote on 18 October, 2008, 13:04

    @oscar- thanks for sharing the link…quite nice workd dude…

  • Sharon wrote on 12 November, 2008, 0:27

    All

    Novice here and scared of code. Am able to update pages and replicate to create new only.

    The above is exactly what I need to incorporate in a webpage but don’t understand how to add to my current page code. simply cut and paste or do I need the full source code

    TIA

    Sharon

  • Roshan wrote on 12 November, 2008, 11:50

    @sharon – just look at the full source and see how it is working ….you can read the tutorial to see the exaplanation for help hope it will help for you…

  • Mali wrote on 14 November, 2008, 21:18

    Hi Roshan,

    thanks for making this available online. I’m new to jQuery as well. I’m a designer by trade. Have high respect for coders. I’m using your code for a page I’m designing, but I wanted to add a visited and hover state to msg_head. As someone who designs with css, my instinct was to add the following to the styles:

    .msg_head a:visited , a:hover, a:active, {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    background-color:#eeeeee;
    color: #8c1919;
    margin:1px;
    }
    Can you give me an idea as to how I can create an visited and hover state?

    Thanks, Mali

  • Roshan wrote on 15 November, 2008, 5:18

    @Mali – If you want to visited and hover state to the links inside .msg_head then it should work I think

    msg_head a:visited , msg_head a:hover, msg_head a:active
    {
    padding: 5px 10px;
    ………

  • mali wrote on 17 November, 2008, 17:49

    Roshan,

    thanks for replying so quickly. Unfortunately, the style above doesn’t work. I think it might have to do with the fact that I’m not linking .msg_head, so there’s no usage of . I’m trying to change the hover state of .msg_head before it expand to include content within . I have to aproach it different. do you have any other suggestions? Thanks,
    Mali

  • Mali wrote on 21 November, 2008, 15:32

    Hi Roshan,

    I received an email from you, but there wasn’t any comments on it. Any chance you replied, but the text didn’t go through?

    Mali

  • Roshan wrote on 21 November, 2008, 17:55

    @mali- you can’t have visited state without anchor tag I think…

  • Max wrote on 12 December, 2008, 19:23

    Nice nice example!! I am not very experience with JQuery or js in general.

    How would one add a “+” “-” or small arrow to make expand and collapse options more obvious for people who do not find such things obvious?

    Thanks!!

  • Max wrote on 12 December, 2008, 23:54

    Solved my issue with having +/. to indicate that the div is collapsible and expandable… to do so I slightly modified the function, .msg_head, and I added a new class called .msg_head2. See below:

    $(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).toggleClass(“msg_head2″).next(“.msg_body”).slideToggle(150);
    });
    });

    .msg_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    background-color:#CCCCCC;
    margin:1px;
    background-image:url(images/plus.gif);
    background-position: 280px 5px;
    background-repeat:no-repeat;
    }

    .msg_head2 {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    background-color:#CCCCCC;
    margin:1px;
    background-image:url(images/minus.gif);
    background-position: 280px 5px;
    background-repeat:no-repeat;
    }

  • Max wrote on 14 December, 2008, 15:09

    building on my previous comment… how can it be done so that if the page is reloaded it will remember the state of the collapsed and expanded DIVs?

    Thanks!!

  • Matt wrote on 18 December, 2008, 11:08

    I’ve got the same question as Max. Is it easy to adapt the code so that the state of expanded or collapsed divs is remembered on page load/refresh. I know it can be done with javascript cookies, but all the other examples I’ve found online would require me to completely change my markup – I love the simplicity of Roshan’s version and would like to keep the message_body/message_head structure intact.

  • Sukru Boztepe wrote on 23 December, 2008, 20:44

    @oscar

    About
    http://oscaralderete.com/hscrolling, how do you make it work without the tables. When I remove them it dos not show any of the divs except for the first one.

    If I change the width of the .oa_slider to say 9600px; and flaot the .oa_panel to left, it works but than i get a horizontal scroll bar.

    Any suggestion?

  • Oscar wrote on 26 December, 2008, 21:02

    @Sukru Boztepe
    Thanks for your comment, too much people ask me for a version without tables, so you can found here the new version and download files:
    http://oscaralderete.com/hscrolling2/
    You can customize it just editing CSS file, because now the JS file don’t need you enter any data.
    Happy holidays everybody!

  • anonymous wrote on 5 January, 2009, 10:51

    hi roshan,
    i pass through all the comments but didnt find my answer
    my problem is:
    if i have passed my cursor 10 times quickly on the menu….once my mouse is out of the firstpane or away from the menu i dont want the dancing effect which continues

  • jam05pgs wrote on 19 January, 2009, 17:38

    Dear Roshan, i was trying to implement but when page is loading all 3 news details are collapse when i clicking these are not expanding, what is the reason please tell me.

  • Unreal Media wrote on 24 January, 2009, 18:48

    Thanks oscar. That smoothed it all out :)

  • sarah wrote on 10 February, 2009, 17:58

    hi guys
    & thanks roshan
    do you know how to make it vertical?

  • Sukru Boztepe wrote on 11 February, 2009, 7:33

    Thank you Oscar.

  • stefv wrote on 12 February, 2009, 15:32

    Hi,

    I love this code, but I have the same problem as Max and Matt. Is there a way to ensure that collapsed items stay collapsed after refresh? Or, as I am using this script to create a menu, can I specify that for a certain directory/page a specific menu_body should be expanded by default? I’ve tought about doing this using PHP if/else statements, but I don’t know what the outcome should be jquery-wise…

    Does anyone know how to do this or an alternative like using cookies?
    Thanks,
    Stef

  • Ryan wrote on 15 February, 2009, 4:50

    Hi, this looks great but I have sIFR text that needs to be in the .msg_head, and when I tack on my h2 tag, it makes it so you have to click around the invisible box the sIFR sits in to make the hidden text scroll down. Any ideas on how I can make it so you can click on the sIFR text and have the box scroll down?

    Thanks,
    Ryan

  • Linda Ellison wrote on 23 February, 2009, 23:29

    Is there a way to link to a message_head from another page and have the body expand? I also saw the question but no answer to “Is it easy to adapt the code so that the state of expanded or collapsed divs is remembered on page load/refresh. “

  • sergio wrote on 16 March, 2009, 22:12

    Hi Roshan. Could you see my first comment?

    Thanks a lot

  • sergio wrote on 16 March, 2009, 22:17

    I guess my first comment had an error.

    My english is very poor, but I try to explain you my problem.

    I make this script for my blog, but, when somebody visit it with Chrome, the accordion menu works good, instead, if they are using Internet Explorer, doesn’t work

    Do u know why?

    thanks in advance.

  • Cesar wrote on 17 March, 2009, 15:04

    Hello Roshan,

    I’m looking for something like this (exactly like this) but to hide a whole table when the user clicks on an image outside that table… is it possible? How?

    Thanks!

  • Cesar wrote on 17 March, 2009, 18:20

    Hello again. Well, I’ve got it. I can make my table disappear now but following this example I can make it appear and disappear by clicking at the other table I have on top of the table I’m making disappear.

    The only problem is that in the “header” table, I’ve also got links and I would like the “body” table to disappear or appear when clicking on an image button on the “header” table. I was looking at your accordion example but the problem is that you don’t use a table so I don’t know how to us that in a table cell. You still are making the whole “row” clickeable and just changing the image.

    Thanks!

  • Eric Nickus wrote on 21 March, 2009, 8:17

    Nice work. Not too many examples that you can just cut and paste. Sweet. MS accordion control is a total joke compared to this
    Thanks

  • Chris wrote on 24 March, 2009, 2:44

    Thanks! I tweaked it just a little. This code will only let you expand an element if it has more than 0 children. This gets rid of that slight little hiccup.

    $(document).ready(function(){
    $(‘.msg_body’).hide();
    $(‘.msg_head’).toggle(function(){
    if($(this).next().children().size() > 0){
    $(this).next(‘.msg_body’).slideDown(100);
    }
    }, function(){
    $(this).next(‘.msg_body’).slideUp(300);
    });
    });

  • rizwan wrote on 16 April, 2009, 17:58

    it did not works with table . can you tell me how i can make it to with tables .
    actullay i need to place forms

    Header-1

  • Tobin Lehman wrote on 30 April, 2009, 19:56

    Just as a heads up, this method works great on divs, but will not work on tables in IE. I had an instance where I wanted to slideToggle a few tables, but IE would choke. It works great in most browsers, but with IE I had to wrap everything in a div, like this example, to get it to work. Just throwing that out there if you are having issues extrapolating this method into other tags in IE.

  • Stephen wrote on 6 May, 2009, 15:48

    Hey can someone tell me how i can have an anchor tag on my page that collapses all the divs when a user clicks on it? I’ve tried coding it myself but after i click the link when i try to reopen any of the divs it opens then immediately re closes. Any help would be appreciated. Thanks.

  • born2bedead wrote on 9 May, 2009, 15:29

    hey roshan bro is it possible to enable cookie in this code. so for example, if i am expanding the content and refresh the page it keeps expanding and same when i am collapsing.

    thanks for the code bro.

  • Walter wrote on 10 May, 2009, 20:45

    Excelent example, i have used it on my website. Thanks very much.

    Walter.

  • vraman wrote on 29 May, 2009, 5:59

    Hi,
    I am trying to customize this code so that one particular category(Dynamically selected) will be expanded when the page loads.
    But I am not able to get it working properly. Can you please help me with that?

  • Deepak Rai wrote on 29 May, 2009, 7:10

    Great post. Helpful for me.
    Thanks a lot.

  • Justin St. Germain wrote on 10 June, 2009, 16:01

    hey, i am having the same question as a couple others. i want to remember the expanded and collapsed div states between page loads. so, if for example, i expand my “Posts” div, and click something under that menu and then submit my changes, the “Post” div is longer expanded, so, i have to expand it again. please le tme know if you have a fix for this. thanks.

  • gry dla doros?ych wrote on 19 June, 2009, 13:11

    Cool informations. Thx man.

  • Hardsy wrote on 21 June, 2009, 15:48

    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.

  • Hardsy wrote on 21 June, 2009, 15:52

    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.

  • Zamshed Farhan wrote on 24 June, 2009, 8:43

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

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

  • aloy wrote on 10 July, 2009, 9:28

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

  • Michael wrote on 27 July, 2009, 10:20

    You can collapse all divs by targeting them directly:

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

  • Oscar wrote on 27 July, 2009, 15:22

    @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.

  • Oscar wrote on 27 July, 2009, 15:29

    ..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();

  • IT Freak wrote on 2 August, 2009, 10:40

    Nice one. Thanks for the share.

  • Plvkas wrote on 3 August, 2009, 6:37

    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.

  • Chad Sharpe wrote on 25 September, 2009, 6:26

    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);
    }
    });
    });

  • Noor wrote on 1 October, 2009, 9:52

    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,

  • Ben Frain wrote on 9 October, 2009, 0:03

    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?

  • fee wrote on 13 October, 2009, 16:33

    @Ben Frain,

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

  • Jaime wrote on 21 October, 2009, 11:19

    this is better

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

  • Eyal wrote on 1 November, 2009, 18:24

    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

  • Yep wrote on 2 November, 2009, 23:29

    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.

  • kaf wrote on 27 January, 2010, 2:15

    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

  • cryx wrote on 5 February, 2010, 9:29

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

  • Rodrigo wrote on 7 February, 2010, 0:58

    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…

Trackbacks

  1. PHP Coding School » Blog Archive » php tips [2008-03-25 11:58:07]
  2. How to make collapsible accordion using jquery and css
  3. JQuery - Expand/Collapse and Autopopulating Select Boxes « Coldfusion Yummy Mummy
  4. Httpcode - ASP.NET Control Toolkit – JQuery Equivalents
  5. Expand-collapse toggle panel (div) using jquery | jquery toggle | My Web Development Bookmarks
  6. pligg.com
  7. Anonymous
  8. Allusion Online FAQ: The Bureau
Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.