Creating expandable & collapsible panels in jQuery, CSS & HTML

18 July, 2013 by Tom Elliott

This is comment page 2 for Creating expandable & collapsible panels in jQuery, CSS & HTML »


110 Comments

  • Jamie says:

    Thanks for a great tutorial – helps me manage all the clutter on my CV page

  • Majid says:

    HI,
    Thank you for this tutorial, I used another collapsible jquery plugin, but it does not provide functionality I need.

    I want to put a form inside , whenever the form is submitted the opened collapsible one close.

    Please tell me hoe to achive this ?
    Thanks, your help is appreciated,

  • Mark says:

    Hi Tom, Great code – I ripped your example to start working with it and I have an issue where I need to run it locally without a webserver. I found the only change I needed to make was to add “http:” in front of your link to jquery and all was sweet.

  • Thanks for this fantastic tool, I’ve implemented it here http://www.citygatechurch.net/church-life/giving/ (behind a resizing iframe) with some nested panels (under ‘ways to give’).

    There’s just one bug (that I’ve created by nesting) in that if a child panel is open and the parent is collapsed then the open ‘children’ stick out the bottom.

    Is there a way to invoke the initialising function so that the heights are recalculated (or another method)?

  • Matt says:

    Great script,
    just wondering if there’s a way to make the whole page of the website scroll with the pannel as it opens. I’m using one near the footer and thought it’d be a good idea to either make it scroll up or get the rest of the page to scroll with it. if that makes any sense?

  • Nancy says:

    Hi, I am struggling the follows. I have 3 panels and each has 3 content. Each contents will have a link. all panels are expandable. After I expand one panel and click one of the link, all other contents in different panel will be loaded again. I am using you code. I think every time the panel and content is loaded, Window.load() function is called, so all contents are loaded. How can I fix this problem?

  • Lena says:

    Hi Tom,

    Is there a way to get the open-close image file?
    Also I’ve been trying to get the jquery to work but haven’t had any success. The expandable panels won’t expand. Do you have any idea how I can fix it?

    Also, thanks so much for uploading this. This is exactly what i’ve been looking for to organize my page.

    • Lena says:

      Actually I figured it out. 😀

      I’m just wondering though, if I were to use this code would I have to credit you in any way or link your site on my page etc?

      Thanks.

  • Dietmar says:

    Hi Tom,
    I extended your script, mixed it with a sticky footer solution (by Ryan Fait) and use some calling parameters ( # of panels, open panel) – and all together works perfect for me. Thanks for the great post.

  • MajorPakz says:

    Great work! It looks amazing!
    How do I change it to open up instead open down?

  • Where’s can I find this image?

    “icon-close-open.png”

  • Tim M says:

    Tom,
    Thanks for posting such a useful script. I’ve run into two issues that I’m trying to work through, but haven’t been able to figure out. I’m hoping you can provide some insight.

    1) I’d actually prefer to have a smaller heading panel, then the content that follows. I’m expanding several paragraphs worth of text, and the header goes across the whole screen. I think I’d prefer to have the header left justified, no background color. Problem is, when I remark out background-color, the content shows up behind the header when closed. Any idea what I can do here?

    2) When opening or closing some the content, a scroll bar appears on the right side on the content window, and sometimes appears in the header after it is collapsed. How do I remove the scroll bar?

    Thanks!

  • Mark says:

    Hi Tom, We are in the process of redesning our website and are looking at the possibility of using J-Query collapse on our product pages. I am having trouble finding good website examples that have utilized collapsible sections. Do you know a few I can check out?

  • Mik says:

    Hi Tom

    I’m just wondering if it’s possible to add some javascript to a button to expand all the panels?

    Any info here would be a great help.

    Thanks

  • Victoria says:

    It is possible to change the direction, I want it to open the expandable-panel-content up not down. Thanks!

  • Mandar says:

    Good work!
    Thanks for sharing the code!

  • Fabio says:

    Hi, there is a problem with IE 8. Panels do not open on click: arrow change position but panel remain closed. Can you help me please?

  • Jim says:

    Very nice collapsible panel functionality, but the page does not print properly. Collapsed panels have header and text on top of one another. Only open panels print out properly. Is it possible to print out the full page regardless of any open or closed panels? Provide a print.css for it or style properties to place in an existing print.css? Thanks!

  • Cleon says:

    I love your code but I am having resizing issues in IE10.

  • Cranes says:

    Hi Tom,

    This is a very useful script. However, I’m having an issue with the $( window ).resize(function(). It seems that when this is enabled and #container width is a %, open panels will close on the iPhone 5 when the user swipes up or down. When you have a lot of content in the open panel, this becomes a problem.

    Any help/advise would be appreciated.

    Thanks.

  • Hugo Coutinho says:

    Hello Tom. I tried using these expandable panels but I can’t get them to work. I tried using the script in an external file as well as in the of the web page but still nothing. Do I have to do something else you’re not telling in this tutorial? I don’t know much about javascript or jQuery, so I know I’m doing something wrong. Can you help me on how I can get this working?

    Thanks.

  • Hugo Coutinho says:

    HI again Tom. I’m having an issue using images in the panels. When the page loads, the images are already visible and if I click the panel nothing happens. It works fine with but I can’t get it to work with tags, be them inside other elements or not.
    Here’s the html:

    Cares

    Fidelidade Mundial

    Thanks

  • Hugo Coutinho says:

    I’m sorry. I didn’t know the tags would be taken out.
    Anyway, the main idea is that there’s an image and text inside a section which is inside a div that is inside the expandable-panel-content. I’ve tried this and just the image directly inside the expandable-panel-content and it was still showing.

  • Abigail says:

    Is there a way to also trigger the expand and collapse function from a top navigation section? I know how to link it to that particular part of the page, but am having a hard time getting it to trigger the actual function. Any help would be appreciated. Thanks!

    • Tom Elliott says:

      Hi Abigail, this would be possible but a little bit tricky. I’d start by putting everything within the $('.expandable-panel-heading').click(function() {...} handler (except the first two lines for obj and objid variables) into a new function e.g. ‘expand_panels()’ and then calling that same function when the nav item is selected. e.g. $('#nav-1').click(function(){ expand_panels()}); you would also need to pass the obj and objid variables to that function. Hope that helps 🙂

  • Abigail says:

    I was developing my site locally and it worked perfectly (minus not being able to figure out how to invoke the click function from the anchors in the top navigation). But now I just put it on my website to test it in a staging folder and the javascript seems to be completely broken. The path is:

    [link removed]

    Any help would be greatly appreciated. I really don’t want to have to start from scratch. Thank you!

  • Konstantin says:

    Hi Tom,

    I absolutely love the way your tool looks. I think it is amazing that you have put it out for free and have continued to offer support to so many like myself who struggle with its implementation. I do hope you could help me make it work as I have not been able to do so.

    I am getting the same error that a few other people here have gotten. I only get the boxes with up-down arrows and no expand function. Only the “Content Heading” titles show. When I click on it nothing happens.

    I am using Avada theme for WordPress. I have not been able to make it work since I took the code.

    I was also not able to run it in jsfiddle: http://jsfiddle.net/XkhwQ/12/

    I tried viewing it with different browsers and still no luck.

    Any help would be greatly appreciated.

    Best,

    Konstantin

  • Honey Vig says:

    Thanks for the well explained article – how to use jQuery panels. But having some issue when there YUI used there and it got broken on platforms like squarespace.

  • Ryan says:

    Please help! I cannot get this script to work. Below is a picture of my code. This is just what I need but I’m not sure why it won’t work!

    Thanks for any help you can provide:

    http://i.imgur.com/SwND7Ap.jpg

  • Christy says:

    This is great script thank you. I have one question. What if I want to up a table in the expanded section. What steps do I need to include?

  • Dave Wadley says:

    Great script.! Is it possible to keep the panel open when using a form inside it in case any errors need to be addressed?

  • Austin says:

    I know this is an old thread, but I figured I would ask anyway. Someone had posted similar question earlier, but it did not get a reply.

    Q: What would you recommend as the best method to create nested (sub)panels?

    I’ve played around with a few methods, none really achieving what I want. I’m going with creating a class like:
    .expandable-subpanel { display: none; }

    But I have not figured out how to get the JS to identify if the parent panel is open or not, and to toggle the display of this panel.

    Thanks for the article, it may be old but still great resource!

  • Peter Avila says:

    Great stuff! Just a few things I can’t figure out and maybe you can point me to them?

    1. I’ve tried removing the background color from the collapsed header so that it’s transparent. I’d like the visual to just be bold text, but then it reveals the text of the collapsed panel. Is there a way to hide this?

    2. I’d like the icon to be on the left side in front of the text and want to recreate it with different symbols. I noticed it’s a png with both images. How does this work? Is there a simple way to create another png that works in this context?

    3. There’s an intermittent sliver that seems to be related to the vertical scroll bar that appears sometimes. Any fix to that?

    Thanks again!

  • Peter Avila says:

    Also, is there a way to get it to stop jumping to the left when the vertical scrollbar appears and then jumping back to the right when its gone?

    Thanks

  • Peter Avila says:

    … and is it possible to use the fonts on the hosting server?

  • tony.zhang says:

    Hi Tom this is a great feature and i tried to use it in SharePoint 2013. I referenced to the js. file in a “Content Editor Web Part”, but the code doesn’t work. I cannot do the expand and collapse. Any special consideration for using the code in SharePoint 2013? thanks.

  • Jamie says:

    Hi, i tried on the code, it works well on normal page but not with page with master page. need help from team. appreciate for your helps