This post is of the Learning jQuery series. Today, we will learn to use the animate() function to slide the panel to the left. It’s useful for display your options for search page. By a trick, we will make the animation more simple.

Updated: I updated the code in the demo and download file. The previous version get error with IE7 by the extra comma in javascript code. Furthermore, I fixed the issue caused if the Left panel is taller than the Right Panel, the content of left side would be truncated. Thanks to roni & B!

HTML

Look at the demo, someone will think we are gonna create a HTML code like image below …

But we’re not gonna do as above. Because, when you do as above, you have to write javascript code to animate both of your left and right panel. If the left panel animates, but the right panel doesn’t, your right panel will keep the original size. We need to expand the width of right side if the left side animates. So, we are not gonna slide the left panel. The left panel will be inside the content. As the result, when we slide content panel to the left, of course, the left panel will animate, too. Out HTML code is:

The HTML code below is very simple. Copy and paste these HTML code below into your HTML file:

<div id="wrap">
  <div id="control">
    <a id="controlbtn" class="open" href="http://aext.net" alt="Show/View your stuffs">Hide your stuffs</a>
  </div>
  
  <div id="maincontent">

     <div id="linkblock">
    
      <h4>All tags</h4>
      <ul id="yourlist">
        <li>
          <a href="http://aext.net/category/css/" title="CSS & XHTML"> CSS & XHTML</a>
        </li>
        <li>
          <a href="http://aext.net/category/php/" title="Resources"> PHP</a>
        </li>
        <li>
          <a href="http://aext.net/category/resources/" title="Resources"> Resources</a>
        </li>
        <li>
          <a href="http://aext.net/category/theme-layout/" title="Themes & Layouts"> Themes & Layouts</a>
        </li>
      </ul>
    
    </div>
  
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p>
  
  </div>

</div>

CSS Code

div#wrap {
    position: relative;
    width: 800px;
    overflow: hidden;
    margin: 100px auto 0px auto;
}

Remember to set the overflow hidden. Because, when the animation completed, the panel which one you want to hide, will go to the left side and go out side of the wrap. We use hidden value for overflow to hide this panel.

CSS code below makes up the link button:

a#controlbtn{
    color: #333;
    text-decoration: none;
    display: inline-block;
    padding-left: 20px;
}

a#controlbtn.open {
    background: transparent url(images/toggle_minus.png) no-repeat left center;
}

a#controlbtn.close {
    background: transparent url(images/toggle_plus.png) no-repeat left center;
}

We will change the toggle icon when users click on the link to show or hide the panel.

Anything else with CSS:

div#linkblock {
    float: left;
    width: 140px;
    margin-left: -150px;
    border-right: solid 1px #DDDDDD;
}

div#maincontent {
    position: relative;
    margin-left: 150px;
}

#yourlist {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#yourlist li {
    padding: 3px 5px 3px 0px;
    position: relative;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 5px;
    margin-left: 0;

}

#yourlist li a {
    color: #D4432F;
    padding: none;
    margin: none;
}

h4 {
    margin: 0px;
    font-size: 16px;
    line-height: 26px;
    color: #333333;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    clear: none;
}

Because, the div#linkblock‘s position is absolute, we have to set position of div#maincontent relative. If not, absolute positioning will place based on the body size.

Working with Javascript

<script type="text/javascript">
    $(document).ready(function() {

        // We will work here

    });
</script>

Next, will write some code to know the link click event.

e.preventDefault(); is used for disable default action of the link. When you click on the link, nothing will happen.

      $("a#controlbtn").click(function(e) {
      
        e.preventDefault();
        
        ....

      });

Next part, the script need to know when does the panel slide to the left or right.

        var slidepx=$("div#linkblock").width() + 10;
        
        if (parseInt($("div#maincontent").css('marginLeft'), 10) < slidepx) {

            $(this).removeClass('close').html('Hide your stuffs');

            margin = "+=" + slidepx;

        } else {

            $(this).addClass('close').html('Show your stuffs');

            margin = "-=" + slidepx;
            

        }

slidepx is an amount in pixel that we will slide the panel. We get that by the width of the panel we want to hide, and plus with 10px is the amount that panel margins. See the CSS code to know why I plus 10px here.

Finally, animate the panel by code below.

The first line in the code is used for detecting if the panel is not animating.

        if ( !$("div#maincontent").is(':animated') ) {
        
            $("div#maincontent").animate({
                marginLeft: margin,
            }, 300);
        
        
        }

Animate with easing jquery plugin:

        if ( !$("div#maincontent").is(':animated') ) {
        
            $("div#maincontent").animate({
                marginLeft: margin,
            }, {
                    duration: 'slow',
                    easing: 'easeOutQuint'
                });
        
        
        }