Armand Niculescu, BEng, MSM, is a 34 year old Art Director at Media Division. and he enjoys working with visual arts for film, web and print.

36 responses to “Javascript animated collapsible panels without any frameworks”

  1. Mark McDonnell

    Thanks Armand, this was a great tutorial.

    I’ve been looking to implement something like this myself for a while now (as I use toggle slide functionality a lot and was always annoyed at having to resort to using a huge Js Library for just that one piece of functionality).

    As an added bonus you threw in the ‘remembering panel state’ logic as well which was great!

  2. Alex

    Amand, Great article! Exactly what i was looking for.
    One question though, how do i set the default state to ‘colapsed’? Trying to figure it out…

  3. john

    ive tried this on one of my sites and it works kind of the problem is it remembers when a div is closed but not if you then re-open it it just always stays closed until the cookie is deleted

    1. john

      heya armand sorry i never checked back it was happening on firefox 3 and IE on vista, its working great now though after your update, thanks for the great script/tutorial im sure it will help lots of people out :)

  4. Daniel

    Hi Amand very nice and clean solution!

    I realized some strange behavior – when i open the panels in firefox they are colapsed – in internet-explorer they are closed may you have some suggestions … regards Daniel.

  5. Gerard

    Hello,
    I carried out the modification () so that limp them are closed at the beginning. but the last one remains open to launching.
    What can I make? Firefox 3 and IE8 idem
    regards Gérard

  6. Nia

    Thanks for shrae…

  7. SCOOT JOHNSON

    Thanks Armand, the panel is really great. I have just tested on firefox 3.0 and IE 7.0 , it works properly.

  8. 1st - zone

    Thanks for share. Very usefull information

  9. Alyen

    Very nice, I put on my new wordpress theme.

  10. hanene

    That’s very nice.thanks a lot

  11. hanene

    just i want to ask you what should i change in your code in order to get a collapsible panels in horizontal direction instead of vertical direction.thanks a lot.

  12. hanene

    Thanks a lot but i have asked you only after i have tried this trivial ligic but i didn’t got a good result. Any way thank you for your answer.

  13. hanene

    Please i want to ask you with what should i replace the tag h2 in a way that it will be vertical ( so it will no longer be a title tag).That is my problem when editing your code in order to get vertical cllapsible panels.thanks again.

  14. shaun

    Hi Armand
    I think your Solution for javascript/css panels is BRILLIANT !
    I have implemented this myself(i am not a programmer nor developer) and I managed to alter the css to get the look and feel I wanted.
    One question though…it works Brilliantly in Firefox(of course) IE 7 & 8 but when I open it in IE6 it doesnt work properly. You have to click the text for the panel to open. When you click the arrow it does not open.
    A small thing I know but is there a way to reslove this as some people still use IE6 (i dont know why though)
    Also, Thank you very much for putting this script out there for us to enjoy !

  15. Jesse W

    Armand – Great tutorial! Mad Props.
    I am trying to implement this on a navigation menu. I have modified the HTML & CSS to add links and style. I have 3 panel divs. For all practical purposes one panel now looks like:
    <div class=”panelcollapsed”>
    <h2><a>Projects</a></h2>
    <div class=”panelcontent”>
    <h2><a href=”link1.html”>link1</a></h2>
    <h2><a href=”link2.html#anch”>link2</a></h2>
    <h2><a href=”link3.html”>link3</a></h2>
    </div>
    </div>
    Here is the issue (I think… I am not an experienced programmer):
    With no cookie (fresh cache as well), all panels are collapsed (as they should be). After opening the panel “Projects” and clicking on “link1,” the next page loads, however all the panels are open.
    Basically I think functionality relating to the Cookie that is created is not working properly (either not being saved properly, or the cookie is not being applied properly with a new page load)
    Questions:
    1.) Is it o.k. to have a H2 within a “panelcontent” div? (or should I use ‘p’ tags, like the original HTML?)
    2.) Are the links in the “panelcontent” div sending users away from the page before the cookie can be updated? (could this be fixed by adding a delay to the link somehow?)
    3.) Is there an easy way to modify the JavaScript to skip “everything cookie?” (i.e. have JS not make, save, or use this cookie. Instead each panel starts with the class specified in the HTML document.)
    Thanks again for this great tutorial!

  16. designer

    I’m curious how you would get an “active” h2 tag.
    Basically, when the user expands a panel, I want the h2 tag to remain “highlighted/active”.  Could use the same CSS as the h2:hover class, but not sure how to alter the javascript to append an “active” style when expanded.

  17. Tom McAdams

    I love the comment above that states ‘Brilliant’. Excellent tutorial, and very condensed code. I have been using jquery for years. Its time for a change. I had the same problem(image not clickable) as Shaun with IE6, and found a workaround for it, but I no longer have IE6, so I can not test it with your code. Again, excellent code!! There are a lot of collapsible codes out there, but your formatting (how it looks to the visitor) is what I think is the most important, and yours is very clean, yet professional in appearance.

  18. Martin Arnold

    Armand … great app!
    However, when using it in IE7, the first panel in a series shows a large (700px?) gap between the introductory content <p> and the <div class=”panelcollapsed”>panel.
    my HTML:   
    <h1>…</h1>
    <p>…</p>
        <div class=”panelcollapsed”>
    <h2>…</h2>
    <div class=”panelcontent”> … </div>
    </div>

    the gap only appears in the first panel; the subsequent panels are perfect. The panel content is identical for all the panels in my mockup and works fine on IE8 and Firefox.  I haven’t checked older versions of IE …
                             

  19. javascript trick

    [...] funnyordie.com displays only a login form after entering this javascript url in the address bar. …Javascript animated collapsible panels without any frameworksIf you need to make collapsible panels that remember their state, but don't want to use any [...]

  20. ProDesignTools

    This is really fantastic, by far the best we found – thank you so much!

    You can see it in live production here, it works really well:
    http://prodesigntools.com/products/adobe-cs5-system-requirements.html

    The only (small) addition we made was to change the mouse cursor when hovering over the header to enhance clickability, a la:

    .panel h2:hover, .panelcollapsed h2:hover
    {
    background-color: #A9BCEF;
    cursor:pointer;
    }

    (The new addition to the code is the last line, “cursor:pointer;”)

  21. Bert

    Armand thanks for the simple plug and play. I may have missed this but bare with me.
    I have a page with around 10 collapsible panels I would like to add an “Expand All” “Close All” link, button or img
    so my users can do this with ease.
    I have even considered, as you may have seen, “Close all but this” but that may be a little more work than time will allow.

    Any thoughts?

    Thanks again,
    Bert Hood

  22. custy1234

    Hey there! thanks for this awesome script. I have installed it on my website without any problems :) I was just wondering if it was possible to make the script so that it dosent remember the opened panels when the user revisits the page. I want to remove the whole “cookies” and “remembering” part of the script so when a user revisits or reloads the page, the panels would be collapsed. I am only asking this since I am using this awesome script as a FAQ page. Thanks for your awesome script!

  23. dmdsoft.com

    Thank you so much,
    It’s very useful,
    but i have some problem..
    it’s how to resize it..
    Thanks.

  24. Wiethoofd

    I just found out your collapse JS doesn’t fully work when you have another classname in the ‘panel’ or ‘panelcollapsed’ div.

    You will then have to add the extra class(es) in the PANEL_NORMAL_CLASS and _COLLAPSED_ in the javascript which is quite anoying when you have various div classes with the panel or panelcollapsed class in them.

    1. Wiethoofd

      A friend of mine got it working using 3 regular expresion functions picked from http://www.openjs.com/scripts/dom/class_manipulation.php to keep the script working even when you have multiple classes in the ‘panel’ or ‘panelclosed’ div class.

      Add the following functions:
      function hasClass(ele,cls){return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));}
      function addClass(ele,cls){if(!this.hasClass(ele,cls))ele.className+=' '+cls;}
      function removeClass(ele,cls){if(hasClass(ele,cls)){var reg=new RegExp('(\\s|^)'+cls+'(\\s|$)');ele.className=ele.className.replace(reg,' ');}}

      Replace line 22 with:
      if (!hasClass(el.parentNode, PANEL_NORMAL_CLASS) && !hasClass(el.parentNode, PANEL_COLLAPSED_CLASS))
      Replace line 43 with:
      var collapsed = hasClass(target, PANEL_COLLAPSED_CLASS);
      Replace line 61 with:
      if(hasClass(elements[i], PANEL_CONTENT_CLASS))
      Replace lines 102 with:
      // set class for the panel
      removeClass(panelContent.parentNode, !(direction < 0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS);
      addClass(panelContent.parentNode, (direction < 0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS);

  25. Deven Chism

    Hi there,

    Does anyone have any suggestions for coding PHP animated collapse? I’m using Wordpress for the first time and I find myself completely incapable of figuring this out on my own. Any help or guidance would be appreciated.

    Thanks!

  26. iThom

    Thanks!
    I’ve used it in my mobile version of school timetable on http://statusowo.net/ithom/Plan/iphone.html
    But the first panels aren’t expanding smooth.

  27. rjcuk

    Exactly what I was looking for, thanks a million :D