Javascript and CSS Tutorial - How to make Sliding Panels

This tutorial provides a step-by-step guide to creating sliding panels
(like the one shown below) using nothing but Javascript and CSS. We used
these panels on Gaming Textures so the
user could hide parts of the page when they weren't being used.

The first thing we need to do is create all the elements that make up
the panel. For this example I went with div elements, because they are
really easy to position and resize. There are a total of 4 div elements
that make up the entire sliding panel. There are 2 divs in the header, 1
div which slides up and down, and another div which just holds
everything. Below is the final result of what we will be building today
- have fun clicking on the X in the upper right corner to make it slide
up and down.

Ok, let's get starting. We are first going to create the div that will
hold everything:

<div style="position:relative;width:250px;height:250px;"></div>

This is the div that is going to hold the other parts of the sliding
panel. I made it 250x250, but you can make it any size that fits your
needs. I went with position:relative; so the panel flows with the rest
of the page contents.

As you're probably already aware, this code produces a large invisible
square. Let's put on the header so it looks more like a typical window.
The header consists of an 18 pixel tall div across the top and another
square div which will hold the 'X' button.

The above code will produce something that looks very similar to the
finished product. Placing the 'X' in the top-right corner is trivial, so
I'll save it for the finished code at the end of this post. Since
Javascript will be modifying this element, we need to assign it an ID. I
chose "sliderElementId", but you can choose whatever you want.

Now that the panel is basically complete, let's start adding some
Javascript code to handle the sliding. Let's begin by declaring some
global variables:

sliderIntervalId holds the id of the interval that will be animating
the slider. I'll explain what that means in more detail later. Since the
slider starts expanded, I set sliderHeight equal to 232 - the height
of "sliderElementId". sliding is a boolean which keeps track of
whether or not the panel is currently sliding. This keeps it from trying
to slide again if the user clicks the 'X' while it is already sliding.
slideSpeed controls how fast the panel will contract and expand.

Let's now create the function that will be called when the 'X' is
clicked.

The first thing I do is check whether or not the panel is currently
sliding. If it is, I simply return out of the function without doing
anything. If it makes it past that check, we are going to slide the
panel either up or down so I set the sliding variable to true. After
that I need to determine whether to slide the panel up or slide it down.
I do this by simply checking the value of sliderHeight. If
sliderHeight is 232, it's expanded, so I need to contract it.
Otherwise, I need to expand it.

I used Javascript's setInterval function to control the animating of
the panel. setInterval takes a function to call and the time interval
to call it at. I set it to 30, which means the function will be called
every 30 milliseconds. I set sliderIntervalId equal to the return
value, so I can cancel the interval later when the panel is finished
sliding.

I created two functions that setInterval will call: SlideUpRun() and
SlideDownRun(). Let's look at SlideUpRun() first.

The first thing this function does is get the element from the id that
was assigned earlier to the sliding panel. The next thing I do is check
to see whether or not the panel is finished sliding. I do this by
checking the value of sliderHeight. If the value is less than or equal
to 0, the panel is fully retracted. If it's finished sliding, I set the
value of sliderHeight to 0, I set the height style of the sliding
panel to 0 pixels and call clearInterval to stop the animation.

If the panel is not finished sliding, I need to decrease the height by
the amount defined in slideSpeed. I then check to make sure the value
is not less than zero. Negative values can throw Javascript errors. I
then set the height style of the sliding panel to the new
sliderHeight.

Let's hook in what we have so far and see what happens. We'll need to
add an onclick event handler to the div which will hold the 'X'
button. This code will launch Slide(); whenever the div is clicked.

You should now see the above sliding panel. When the square on the right
of the header is clicked, the panel should retract like the above
example. If you click the square again, a Javascript error will be
thrown because we have not yet defined the function to control expanding
the sliding panel. Let's do that now.

This function is very similar to SlideUpRun(). The only major
difference is now I'm checking to see if the panel is greater than or
equal to 232 to see whether or not the panel is finished sliding. I also
increment sliderHeight instead of decrementing it.

That's all the code required for a basic sliding panel. I'll finish up
the tutorial by posting all the code required to duplicate the sliding
panel that is at the top of this post.