Sliding Panels

Javascript Sliding Panels using Generic Animation

In this tutorial, we're going to combine the original tutorial on Sliding Panels with our new tutorial on Generic Animation. Using our generic animation code, making sliding panels becomes much easier. You can download the Javascript code for generic animation here.
For this tutorial, I'm going to show how to make a few different types of sliding panels. Hopefully you'll have a good understanding of how to use the generic animation code to make all sorts of interesting and unique sliding panels by the end of this post.
Let's start with a standard vertical slider. In this example, when you click the header, the panel will contract and expand exactly like it does in our first sliding panel tutorial.

vvv

Content

Here's the HTML code required to make the above example.

<div style="position:relative;
           width:150px;
           height:170px;
           top:0px;
           left:0px;">
  <div id="exampleHeader1"
      style="position:absolute;
             width:150px;
             height:20px;
             top:0px;
             left:0px;
             background:#3b587a;
             text-align:center;
             color:#FFFFFF;"
      onclick="slideExample1('examplePanel1', this);">
    ^^^
  </div>
  <div id="examplePanel1"
      style="position:absolute;
             width:150px;
             height:130px;
             top:20px;
             left:0px;
             background:#a6bbcd;
             overflow:hidden;">
    Content
  </div>
</div>

 

 

There's nothing too special about this code. There's one div which just holds the header and the sliding panel. The next div, with the id "exampleHeader1", is the one that is going to be listening for the onclick event. I put the text '^^^' inside this div so the user has a visual indication of the state of the sliding panel. The div with the id of "examplePanel1" is the div that we will actually be animating. Now let's look at the Javascript code to make this panel slide.

function slideExample1(elementId, headerElement)
{
   var element = document.getElementById(elementId);
   if(element.up == null || element.down)
   {
      animate(elementId, 0, 20, 150, 0, 250, null);
      element.up = true;
      element.down = false;
      headerElement.innerHTML = 'vvv';
   }
   else
   {
      animate(elementId, 0, 20, 150, 130, 250, null);
      element.down = true;
      element.up = false;
      headerElement.innerHTML = '^^^';
   }
}

 

 

As you can see, the Javascript code required to make a sliding panel has been reduced significantly from our original tutorial. This is the function that is called when the slider's header is clicked. The first thing I do is get the sliding panel div element by calling getElementById. I then check to see which direction I need to slide the panel. I'm storing the state of the panel directly in the panel's div element. If I haven't slid the panel yet (element.up == null), or element.down is true, I need to slide the panel up. Otherwise, I need to slide the panel down. Thanks to the animate function provided by the generic animation code, sliding the panel only takes one line of code.
The animate function takes the id of the element, the new left position, the new top position, the new width, the new height, the animation length (in milliseconds), and a callback function. So, to slide the panel up, I want to set the new position to 0, 20 and the new size to 0, 250. I want the animation to take 250 milliseconds and I don't want any function called when the animation is finished - so I set it to null. Next I set the state of the panel by setting element.up to true and element.down to false. Lastly I change the text in the header to 'vvv'.
To slide the panel back up, the animate function is called again with the panel's original position and size. Next, element.down is set to true and element.up is set to false and the header's text is changed to '^^^'.
Now let's look at a slider that's very similar to the vertical one but slightly more interesting. This sliding panel will slide horizontally from left to right when the header is clicked.

<
<
<

Content

Here's the HTML code:

<div style="position:relative;
           width:150px;
           height:170px;
           top:0px;
           left:0px;">
  <div id="exampleHeader2"
      style="position:absolute;
             width:20px;
             height:150px;
             top:0px;
             left:0px;
             background:#3b587a;
             text-align:center;
             color:#FFFFFF;"
      onclick="slideExample2('examplePanel2', this);">
    &lt;<br />&lt;<br />&lt;
  </div>
  <div id="examplePanel2"
      style="position:absolute;
             width:130px;
             height:150px;
             top:0px;
             left:20px;
             background:#a6bbcd;
             overflow:hidden;">
    Content
  </div>
</div>

The HTML code is nearly identical to the vertical slider code except for changing the orientation of the header and panel. I also changed the text in the header to a series of <'s. Let's see the Javascript code:

function slideExample2(elementId, headerElement)
{
   var element = document.getElementById(elementId);
   if(element.up == null || element.down)
   {
      animate(elementId, 20, 0, 0, 150, 250, null);
      element.up = true;
      element.down = false;
      headerElement.innerHTML = '&gt;<br />&gt;<br />&gt;';
   }
   else
   {
      animate(elementId, 20, 0, 130, 150, 250, null);
      element.down = true;
      element.up = false;
      headerElement.innerHTML = '&lt;<br />&lt;<br />&lt;';
   }
}

This code is exactly the same as before except for the parameters passed into the animate function and the text in the header div. Instead of sliding the panel up and down we're sliding the panel left and right. So to slide the panel left we need to keep the position of the panel the same at 20,0 and resize it to 0x150. The animation will still take 250 milliseconds with a callback of null. To slide the panel right, just reset the size of the div to its original value - 130x150.
Now that we have the basic sliding panels out of the way, let's look at some more interesting ones. This panel will slide diagonally into the top-left square.

-

Content

<div style="position:relative;
           width:150px;
           height:170px;
           top:0px;
           left:0px;">
  <div id="exampleHeader3"
      style="z-index:1;
             position:absolute;
             width:20px;
             height:20px;
             top:0px;
             left:0px;
             background:#3b587a;
             text-align:center;
             color:#FFFFFF;"
      onclick="slideExample3('examplePanel3', this);">
    -
  </div>
  <div id="examplePanel3"
      style="position:absolute;
             width:150px;
             height:150px;
             top:0px;
             left:0px;
             background:#a6bbcd;
             overflow:hidden;">
    <br /><br />Content
  </div>
</div>

Again, the HTML code is very similar to the previous example. Since the square sits on top of the sliding panel, I needed to set its z-index to 1 so it was not hidden behind the panel. I set the text in the square to '-', which is switched to '+' when the panel is slid in.

function slideExample3(elementId, headerElement)
{
   var element = document.getElementById(elementId);
   if(element.up == null || element.down)
   {
      animate(elementId, 0, 0, 20, 20, 250, null);
      element.up = true;
      element.down = false;
      headerElement.innerHTML = '+';
   }
   else
   {
      animate(elementId, 0, 0, 150, 150, 250, null);
      element.down = true;
      element.up = false;
      headerElement.innerHTML = '-';
   }
}

This time we want the size of the panel to be 20x20 when it's slid in, which is the size of the top-left square. When the panel slides back out, the size is returned to its original 250x250. The text in the square is alternated between '+' and '-' depending on the state of the panel. Other than that, the code hasn't changed from the previous two examples.
The generic animation function has the flexibility to create some complex animations. Let's create a sliding panel that uses multiple motions to complete a slide. When the square is clicked, the panel will first slide left and then slide up.

-

Content

<div style="position:relative;
           width:150px;
           height:170px;
           top:0px;
           left:0px;">
  <div id="exampleHeader4"
      style="z-index:1;
             position:absolute;
             width:20px;
             height:20px;
             top:0px;
             left:0px;
             background:#3b587a;
             text-align:center;
             color:#FFFFFF;"
      onclick="slideExample4('examplePanel4', this);">
    -
  </div>
  <div id="examplePanel4"
      style="position:absolute;
             width:150px;
             height:150px;
             top:0px;
             left:0px;
             background:#a6bbcd;
             overflow:hidden;">
    <br /><br />Content
  </div>
</div>

This code is exactly the same as the diagonally sliding panel, so let's dive right into the Javascript.

var slideElement = null;

function slideExample4(elementId, headerElement)
{
 
   slideElement = document.getElementById(elementId);
   if(slideElement.up == null || slideElement.down)
   {
      slideUpStep1();
      slideElement.up = true;
      slideElement.down = false;
      headerElement.innerHTML = '+';
   }
   else
   {
      slideDownStep1();
      slideElement.down = true;
      slideElement.up = false;
      headerElement.innerHTML = '-';
   }
}

function slideUpStep1()
{
   animate(slideElement.id, 0, 0, 20, 150, 250, slideUpStep2);
}

function slideUpStep2()
{
   animate(slideElement.id, 0, 0, 20, 20, 250, null);
}

function slideDownStep1()
{
   animate(slideElement.id, 0, 0, 20, 150, 250, slideDownStep2);
}

function slideDownStep2()
{
   animate(slideElement.id, 0, 0, 150, 150, 250, null);
}

The first thing you might notice is the global variable slideElement. We need a variable to store what div is currently sliding because the callback to the animate function can't except parameters. The function slideExample4 is the same as the previous example except that I've moved the call to animate into slideUpStep1. When slideUpStep1 is called, the panel is first slid left and slideUpStep2 is passed into animate as the callback. That means as soon as the the panel is done sliding left, slideUpStep2 will be called to slide it up. To slide the panel back out, the process is simply reversed using slideDownStep1 and slideDownStep2.
That's it for creating sliding panels with our generic animation function. As you can see, using generic animation makes the process of creating sliding panels very simple and the sky's the limit as to how creative you want the slide process to be.