Jquery help, making collapsible sidebar for a vbulletin forum

I'm trying to make a sidebar for my vbulletin skin that's expandable/collapsible. Heres my code:

<script>
    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);
        });
    });
</script>


<!--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>

</table>
<!--SideBar End -->

I want the sidebar to collapse completely, so it looks like it wasn't there.

Also I know using tables ain't great, but its the easiest 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 I've done Here Thanks to anyone that can help.

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 );
});