Jquery help, making collapsible sidebar for a vbulletin forum

Question

Hi guys, Im trying to make a sidebar for my vbulletin skin thats expandable/collapsible. Heres my code:

    jQuery(document).ready(function(){
     $(".hide").click(function(){
     $("#sidebar").animate({width:"0px", opacity:0}, 500 );
     $("#sidebar").animate({padding:"0"}, 500 );
     $("#sidebar").css("margin", "0");
     $("#sidebar").hide;
     });
     $(".show").click(function(){
     $("#sidebar").animate({width:"150px", opactiy:100}, 500 );
     });

     });




<!--Sidebar Start-->
<table width="$stylevar[outertablewidth]" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>

    <td width="150" valign="top" class="page" id="sidebar" style="padding: $stylevar[cellpadding]px;">
     <a class="hide" href=#>YOUR CONTENT HERE</a>
                <a class="show" href=#>YOUR CONTENT HERE</a>
    </td>


<!--SideBar End -->

I want the sidebar to collpase completely, so it looks like it wasnt there.

Also i know using tables aint great, but its the easieest way to do it with vbulletin. Oh, and i plan on moving the .hide and .show out of the sidebar once its done, probably just to the left of it.

Last thing, you can view what ive done Here Thanks to anyone that can help.

Answer 1

I would take a look at the extslide plugin which defines slideLeftHide() and slideLeftShow(). It could be helpful to either use the plugin or just browse the source to see how they do it.

edit: they appear to do the equivalent of the following:

$(".hide").click(function(){
  $("#sidebar").animate({width:"hide", opacity:0}, 500 );
});

and

$(".show").click(function(){
  $("#sidebar").animate({width:"show", opacity:100}, 500 );
});