Site icon StartFunction

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:

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

Exit mobile version