Collapsible Panel

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:

	<link rel="stylesheet" type="text/css" href="reset.css"/>
	<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="general.js"></script>

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.

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

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:

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

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:

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

Style

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

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

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:


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

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

Liked this? buy me a coffee so I can stay awake doing more things like this.

Spread the word, share this post

Tags: development, javascript, tutorials, usability

Posted on Friday, June 19th, 2009 in jQuery.

60+ Must Have jQuery Toolbox | tripwire magazine July 21st, 2009

[...] Collapsible Panel [...]

Collapsible panel using jQuery | Ajaxdump September 3rd, 2009

[...] Sample | Tutorial Share and [...]

ncorpse September 5th, 2009

Thx alot for this..
Also wanted to say HOW AMAZING YOUR THEME IS. You should be fucking proud of it! never seen such a cool before!

Fede October 19th, 2009

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!

Elliot October 19th, 2009

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

Jorge October 26th, 2009

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!!!

Hasan January 3rd, 2010

Nice tutorial… i was looking for the samething… thanks…

Ayudantegrafico January 5th, 2010

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!

Erik January 8th, 2010

Great tutorial!

I am also wondering about having the panel hidden on load. Please advise

Andrius January 14th, 2010

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.

Elio January 15th, 2010

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.

Andrius January 15th, 2010

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.

It does works. Check it on this new example.

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 ;/

Elio January 17th, 2010

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.

Andrius January 17th, 2010

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

Andrius January 19th, 2010

Am i waiting for reply at this topic for nothing? Is there any one could help me please?

AYUDANTEGRAFICO January 25th, 2010

Thanks for the help. Im working in a proyect with multiple panels in left and right side… when i finish him will show you… thanks Elio

Elio January 30th, 2010

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.

Sumanas February 12th, 2010

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. (-:

Raheel March 26th, 2010

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

sheril April 13th, 2010

how do i download the general.js file??

Elio April 14th, 2010

use the absolute linking path that you can find on the source code of the html file.

otavio April 28th, 2010

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!

Elio April 28th, 2010

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.

Phil Crowe May 4th, 2010

This is brilliant. How could i get it to collapse downwards?

JS/CSS Show/Hide div - 9lives - Games Forum May 8th, 2010

[...] Panel Collapsible Panel | jQuery | ilovecolors een uitgebreide [...]

gas June 23rd, 2010

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)

Dirk July 12th, 2010

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 ?

95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets | tripwire magazine August 8th, 2010

Collapsible Panel

Ingredients for the recipe

Markup

Style

Quiet! working on the code!

This is the end, my friend

“Collapsible Panel” received 30 comments! Add yours.

Leave a comment

Recent Posts

Your Website is More Valuable Than Facebook

Deminify JavaScript

Sort text lists alphabetically

Top 300,000 Alexa sites by favicons

Comment karma chameleon

Follow me on Twitter