Collapsible Panel

Posted on by Elio Rivero

In this tutorial we will be learning how to create a collapsible panel or sidebar and an expandable content area. jQuery will be assisting us to create this smooth and sleek behaviour. Once our panel is hidden, we will display a small button to reveal it again.

First, you might want to see the Collapsible Panel demo. Then proceed to the tutorial.

Ingredients for the recipe

Our collapsible panel using jQuery also needs a bit of sugar and milk (or peanut butter if you want). This is what we’re going to use:

1 XHTML file for our structure.

2 CSS files, a reset file from YUI library and our own positioning and styling CSS.

2 JS files, the jQuery library and our own JavaScript file to code our functions.

Embed these files in the XHTML by using:

[html]
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
http://jquery.js
http://general.js
[/html]

Get your coffee ready because we’re going to start building our collapsible panel using jQuery now

Markup

The structure is a simple two column layout.

[html]
<div id="colleft">
<!– cool panel goes here –></div>
<div id="showPanel"><span>&raquo;</span></div>
<div id="colright">
Dummy text</div>
[/html]

The right column is where the content goes, and we will talk later about the showPanel div. Let’s add our panel on the left column:

[html]
<div id="panel">
<h1>My Panel</h1>
<ul>
<li>item #1</li>
<li>item #2</li>
<li>item #3</li>
<li>item #4</li>
</ul>
<div id="hidePanel"><a href="#">&laquo; Hide Panel</a></div>
</div>
[/html]

One div for the panel, H1 and a set of menu items. Now, take a look at the last div. This is what we will be using as a button to hide our panel. We will also added before the button to display the panel again when it’s hidden. It will be placed between the left column and the right column. The reason I’m adding it here instead of adding it with append is that I don’t want to spend another computer cycle and it’s only a simple div. The full xhtml is:

[html]
<div id="colleft">
<div id="panel">
<h1>My Panel</h1>
<ul>
<li>item #1</li>
<li>item #2</li>
<li>item #3</li>
<li>item #4</li>
</ul>
<div id="hidePanel"><a href="#">&laquo; Hide Panel</a></div>
</div>
</div>
<div id="showPanel"><span>&raquo;</span></div>
<div id="colright">
Dummy text</div>
[/html]

Style

The important structuration here is only the following, the rest is merely presentational:

[css]
#colleft   { width:175px; margin-top:10px; float:left; overflow:hidden; background:#333;}
#showPanel { position:inherit; z-index:2; left:0; float:left; padding-top:40px; display:none; width:0px; height:100px; cursor:pointer;}
#showPanel span{display:block; font-size:24px; height:30px; margin-top:20px; padding:10px 0 10px 10px; width:20px; background: #333;}
#colright { padding-top:10px; color:#1c1c1c; margin-left:200px; }
[/css]

The left column has a width of 175px. Later in the coding stage, we will modify the margin-left of the inner div#panel to set it to -175px, and since div#colleft has overflow:hidden, it will dissapear. Notice that showPanel has display set to none and its width set to 0px. Of course, when the panel hides, the showPanel button will be displayed through or jQuery code. Finally, notice that colright, the one that will be expanded, has a margin-left of 200px. Later through our code, this margin will be reduced to 50px to expand the box width 150px more.

Quiet! working on the code!

Ok, it’s show time. Here’s the code we need:

[js]

jQuery(document).ready(function(){
$("#hidePanel").click(function(){
$("#panel").animate({marginLeft:"-175px"}, 500 );
$("#colleft").animate({width:"0px", opacity:0}, 400 );
$("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);
$("#colright").animate({marginLeft:"50px"}, 500);
});
$("#showPanel").click(function(){
$("#colright").animate({marginLeft:"200px"}, 200);
$("#panel").animate({marginLeft:"0px"}, 400 );
$("#colleft").animate({width:"175px", opacity:1}, 400 );
$("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");
});
});

[/js]

We will be using the click event on hidePanel and later on showPanel. When the panel is visible and we click on hidePanel, the panel will animate towards a negative margin and the left column will shrink down to zero while fading the opacity towards zero as well. We display showPanel div animating its width and fading it in.

When the panel is hidden and we click on showPanel, the margin of the right column is restored as well as the panel margin. Left column fades in and recovers its width while at the same time the showPanel fades out shrinking down its width to zero.

This is the end, my friend

That’s it, our example is completed. Of course its cross browser compatibility is ensured by our friend jQuery (and the very simple markup we used). You can place anything instead of the main content div, like an iframe with 100% width. The fact that we’re only animating the external container makes it easily customizable, you can change the inner structure adding anything you want to.

Published by Elio Rivero

Software engineer, designer and photographer.

48 thoughts on “Collapsible Panel”

  4. Hi! Nice tutorial!
    Is it possible to change the expanding direction from right to left? I need to put the panel on the right side of my web page…
    Thanks!

  5. Of course it’s possible! You only need to change some of the horizontal values in the css and the jQuery script =)

  6. Is there a way to declare the panel closed when the page loads?

    i tried to change some classes but the panel always show open when the page loads.

    Thanks!!!

  8. first, thanks for the tutorial, its very simple to follow and customize. My doubt its: how i can put the panel in the hide state from the begining?
    maybe its a simple question but i can´t find the solution.

    Thanks again!

  10. Hello,
    I sow that some people wonts that the panel would be closed on page start, i am also wondering how to make this.Also i would like to no if it is posible to have about 6 these panels with diferent content i need.Finally, i would like to know how to make it slide to left side.Please help me, i am new with jquery so i wuold be grateful if someone could write a code answering to my question.Please write here oe email me.Thanks in advance.

    1. Sorry for the absence but I’ve been away from work 🙂 To hide the panel at the beggining, add the #panel styling and modify the corresponding styles with these:
      #panel {margin-left: -175px;}
      #colleft { width:0px; margin-top:10px; float:left; overflow:hidden; background:#333; display:none;}
      #showPanel span{display:block; font-size:24px; height:30px; margin-top:20px; padding:10px 0 10px 10px; width:20px; background: #333;}
      #colright { padding-top:10px; color:#1c1c1c; margin-left:50px; }
      Andrius, to specifically slide it from left you’re going to have to modify CSS and JavaScript.

  11. Didnt worked with these:

    #panel {margin-left: -175px;}
    #colleft { width:0px; margin-top:10px; float:left; overflow:hidden; background:#333; display:none;}
    #showPanel span{display:block; font-size:24px; height:30px; margin-top:20px; padding:10px 0 10px 10px; width:20px; background: #333;}
    #colright { padding-top:10px; color:#1c1c1c; margin-left:50px; }

    Instead of that black arrow there is nothing.

  13. Yea, the 2nd example is realy working like i want to.Maybe i made smth wrong, btw thx.

    Could you please help me with making to left slide, i dont know how to edit javascripts ;/

  14. Andrius, it’s just a matter of changing left margins and floats to right and vice versa. Maybe you will have to adjust some other things but it won’t be too hard.

  15. I tried to change margin direction in general.js and float direction in style.css , but nothing hapened, it collapsed to right ;//
    Please help.

    1. Great AG, I would to see it! 🙂 First time I developed this solution was for a e-learning platform, so student could clear the side/top bars to maximize space for the content.

  18. Hi, would it be possible to get the panel to display on top of the text/content in the page?

    In other words, instead of re-arranging the text to make room for the panel, could the panel simply display on top of the content – a bit like a dialog. I’m guessing this will involve changes to the CSS?

    Thanks, and I think your theme is really colourful. (-:

  19. F sake…. mind blowing………………………………………………………………….. i cant believe it…. wow….. excellent…… lush pash script.!!!!! (Y) keep it up bro….

  21. awesome. I’ve been looking for something like like this and your example is lean and mean! I was able to adapt it to my needs and it’s looking great!

    However, I didn’t understand why did you use the reset.css? I prefer w/out so i can leverage my styles.

    also, in IE (yuck), some of the types get blurry I restore the column.

    At any rate, BIG THANK YOU!

    1. The use of a reset stylesheet is a common practice nowadays. It’s based on the fact that different browsers have different internal rules to render the HTML elements when it comes to margins, paddings, font sizes and so. By using a reset stylesheet, we make sure to start working in a blank canvas, with zero margins, zero paddings, the same font-size in all browsers, etc. It is then when we can start building our stylesheet using a common foundation.

  24. Realy nice, thanks for the tip.
    For my purposes I would like to have the menu float on top of the html content. How could it be done? (sorry if it’s stupid question)

  25. Have you noticed how the font changes of the panel after you have hidden the panel? It gets all jagged. Any ideas how to prevent or restore it ?

  27. Hey there, wonderful plugin! There aren’t that many on the internet so i am thrilled to see yours.
    The only thing i really miss is an integration of Jquery cookie.It would be really great if you could tweak this so it remembers the state, whether it’s collapsed or not after a new page load.
    Any change you could make a version based on Jquery Cookie?

    gr
    Dave

  28. The easiest way to integrate it with Jquery Cookie is to set the cookie on the click event. You can later restore the value on document ready and set the visibility of the panel accordingly.
    There’s also a tutorial about working with jQuery Cookie in ilovecolors that you might find interesting.

    1. Actually, animating it from the bottom is simpler than doing it from the sides. I’ll try to write a tutorial later, but you might want to check out http://graphicsnippets.com/
      For each thumbnail there’s a block that slides up but it’s actually done with slideDown from jQuery! The idea is to have an element fixed at the bottom. The slideDown then enlarges it downwards, but since its position is fixed at the bottom it will appear to move upwards.

  32. that was Superb
    but i want to Display 4 different panel where i want that panel inside a table (tr consists of 2 panel)

  33. hey!

    awesome demo. really has helped me with the sliding panels, as there aren’t many around.

    quick question – how would I go about manipulating the code so I could toggle the arrow as both the open and close button?

    this post is definitely helping me get my site off the ground!

  35. Great tutorial, thanks!

    However…I can’t find a solution anywhere on the web – maybe I’m using the wrong search words, I don’t know. I want the panel to slide over the content, not to push it to the side. I’ve tried z-indexing divs but that doesn’t work, and I’m really out of my depth here.

  36. Karen, this code can be easily adapted to slide over the content. In the css, remove the margin-left for #colright and add position: absolute; for #colleft. Then in the JavaScript, remove the code that operates on #colright and the panel will now slide over the content. Of course, you’ll have to make additional tweaks to fit your own specific code.

  37. Hi Elio

    First of all a big big thanks to you for providing such a wonderful code and then the support to it as well. Many Thanks for this.

    However if would like if you can throw some light on why does the code not work in IE? It works fine for “Hide Panel” but stops working for “Show Panel”. You can check the code at dentpro.co.in/panel

    Thanks in advance. And once again congratulations for a good tutorial.

    Cheers
    Mandar

  40. THANK YOU!!!

    Not a designer by any margin and I had been looking for a simple panel for the last little while.

    This is exactly it!

Leave a Reply