We've written lots of tutorials about sliding panels, and in all the previous tutorials we saw how to implement sliding panels from scratch or how to implement them using our generic animation library. In this tutorial, we're going to build them using the very popular Javascript library, JQuery.
If you've never experienced JQuery before, I'd recommend walking through their Getting Started tutorial. The version of JQuery I'm using for this tutorial is 1.2.6.
Let's start off with an example of what I'm going to build today. Below is a set of four sliding panels each with different content in them. Go ahead and play around a little.
As you can see, the panels dynamically expand based on the height of the content. Let's start with the HTML code required to build the smallest example.
<div class="slideHeader">Click Me</div>
<div class="slideBody">
Lorem ipsum.
</div>
</div>
Very simple. In fact the other three examples look identical to this one except the content is different. Here's the css that's required for these panels to actually look like panels.
{
height: 20px;
background: Blue;
color: White;
}
.slideBody
{
background: Gray;
padding: 5px;
}
.slidePanel
{
width: 100px;
float: left;
margin: 5px;
}
Now for the guts - the JQuery code to make it all work.
//Fixes an animation glitch caused by the
//div's dynamic height. Need to set the
//height style so the slide functions work
//correctly.
$("div.slideBody").each(function(){
$(this).css("height", $(this).height() + "px");
});
//hook the mouseup events to each header
$("div.slidePanel").children(
"div.slideHeader").mouseup(function(){
//find the body whose header was clicked
var body = $(this).parent().children("div.slideBody");
//slide the panel
if(body.is(":hidden"))
body.slideDown();
else
body.slideUp();
});
});
First off, I have to say I was downright impressed at how little code I had to write to make this work. Especially if you look at any of our previous sliding panel tutorials.
The first block of code might look a little strange, but with the content being dynamic, JQuery has no idea how tall it's supposed to be, and it needs that information to slide correctly. To get around it I loop through every sliding panel's body and set the height style to the actual height of the panel.
Next I use JQuery's Selectors heavily to attach a mouseup event to every header. I then use the selectors again to get the body associated with the header that was just clicked. Lastly, I determine which way to slide the panel based on whether or not the body is hidden.
This is one of my first introductions to JQuery and I can easily say I'm very impressed with how powerful it is. The combination of Visual Studio 2008 and the addition of intellisense support for JQuery made this one of the most enjoyable Javascript experiences I've ever had. With all of our projects here, especially Gaming Textures, we've never used a Javascript framework - everything was built from the ground up. We were crazy, and now I'll be using JQuery every chance I get.
12/05/2008 - 11:03
Instead of using an if statement to check which way to slide the div, you can just do:
body.slideToggle();Most of the effects have a show/hide/toggle property that you can use. :)
12/05/2008 - 15:08
For the simple examples above, you're absolutely right. Most of the time, though, I do something depending on the state of the panel (e.g. display a collapsed/expanded icon). So somewhere there will have to be a check. I guess slideToggle() could be used and the state checked in the callback - depending on when I needed to know the state (before or after it started sliding). Thanks for the advice.
12/08/2008 - 13:26
This is nice. Is there an (easy?) way to get the div to appear closed upon first load?
12/08/2008 - 16:35
Darrel, that’s what everyone wants, however it’s also very difficult. JQuery has to know the height of the panel before it can slide correctly, and the only way to get the height of a dynamically created div is to actually render it once.
You can make these ones start hidden by calling .hide() after the height is set in the first loop. However, doing this will cause them to appear for a brief moment then disappear - not very good looking.
If you set the heights of the divs statically, then the changes are pretty minor to get them to start hidden. I can post some example code if you need it.
05/26/2011 - 16:31
Hi, could you please write the code to make it hidden. Heights and DIVs are set in the .css file.
If you can, send this code to geremii[at]gmail.com
Thank you!
12/22/2008 - 16:43
Re: Hiding in the beginning.
Don’t use .hide(), use .css instead.
ex:
.css(’visibility’,’hidden’);
or
.css(’display’,’none’);
I prefer visibility: hidden though, as the height/width are still present. display none tends to wipe them out.
12/09/2008 - 21:03
Can you perform this with dynamic ids or classes if nesting the information you want to toggle is not an option?
e.g.: clicking #active-100 will toggle #toggle1-100 and #toggle2-100 when the number (’-100′ in this example) is unknown?
12/31/2008 - 07:43
Nice this is the closest thing that Ive seen to what I want
let me propose a nice expansion instead of having individual columns of information make a box for each topic set the width to spread out under all the topics and start them hidden to get the height like Andrei said then when a topic is clicked close any opened boxes and slide this box down. I’m new to Jquery but it seams like it wouldn’t be to hard to do
If it’s already done somewhere drop a note and so I can find it please
Thanks
06/23/2009 - 13:44
Hi,
I want to auto fade in fade out div with using content and images and i can able to add more slides there. Would you help me about that.
11/02/2009 - 14:54
thank you thankyou thankyou
06/27/2010 - 07:34
Hi
I'm a complete nexbie to this and am very grateful for the example. My question:
Is there a way to have the first box open with the remaining closed until chosen.
Thanks and regards
07/20/2010 - 02:25
nice one
08/02/2010 - 05:51
dfsdfsdfsdf
08/02/2010 - 05:51
werwerwerwe
02/07/2011 - 18:35
You could also use a small plugin like the jQuery Content Panel Switcher
http://code.google.com/p/jquery-content-panel-switcher/
03/03/2011 - 05:50
does not work
03/25/2011 - 20:54
Hello everybody, I am new here. I am a 56yo self-taught designer and I am an expert at just about nothing. However, I have put together a test page for updating my nephew's business site with a show/hide sliding text content. My problem is the rendering in IE (the same problem it seems that everyone has with IE). On return, the slide resets too high. It has a top margin of 6px and seems to return to 6px below the previous div above the hidden panel. I attempted to change this by adjusting the margin but then the start position is wrong. The only script I am using is this (with reference to jquery-1.5.1.js):
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
It works perfectly in Chrome and Firefox. Can anyone give me some advice on how to prevent IE from resetting the slide too high? Your help would be greatly appreciated.
The page is http://www.wagra-dexter.com.au/testpad/5star.html but don't look too closely; it needs a few touch-ups. As I said, at the moment it is merely an example page to show my nephew.
Hold that thought! I just fixed it! It's all in the padding.