I'm trying to implement a collapsible sidebar. I got a script for this and its working fine.

But the side bar is expanded at the page load and  I need the div to be collapsed at the page load.

How can I fix this ?

Here is the custom.js code

2. $(document).ready(function () {
3.     var f = true;
4.     var g = true;
5.     var h = true;
6. 
   
7.     var i = {
8.         handles: 'e',
9.         minWidth: 70,
10.         maxWidth: 70,
11.         resize: function (a, b) {
12.             var w = $(this).width() + 10;
13.             $("#content").css("marginLeft", w + "px").parent().css("marginLeft", "-" + w + "px");
14.             windowResize();
15.             
16.         }
17.     };
18.     $("#sidebar").resizable(i);
20.     var j = $("<a/>", {
21.         id: 'stoggle',
22.         css: {
23.             top: (($("body").height() + $(window).scrollTop() - 63) / 2) + "px"
24.         }
25.     });
26.     $("#sidebar").append(j);
27.     $("#stoggle").toggle(function () {
28.         var w = $("#sidebar").width();
29.         $("#sidebar").css("width", 0).resizable("destroy").data("width", w);
30.         $(this).addClass("active").css("right", 0).wrap($("<div/>", {
31.             css: {
32.                 display: 'block',
33.                 'font-size': '0.1px',
34.                 position: 'absolute',
35.                 zIndex: '9999',
36.                 height: '100%',
37.                 right: '0px',
38.                 top: '0',
39.                 width: '6px'
40.             }
41.         }));
42.         $("#content").css("marginLeft", "10px").parent().css("marginLeft", "-10px");
43.         $("#sbcont").hide();
44.         return false
45.     }, function () {
46.         var w = parseFloat($("#sidebar").data("width"));
47.         $("#stoggle").css("right", "0px").unwrap();
48.         $("#sidebar").resizable(i).css("width", w + "px");
49.         $(this).removeClass("active");
50.         var a = $("#sidebar").width();
51.         $("#content").css("marginLeft", (a + 10) + "px").parent().css("marginLeft", "-" + (a + 10) + "px");
52.         $("#sbcont").show();
53.         return false
54.     });
55.     windowResize();
56.     $(window).bind("resize", windowResize);
57.     $("#content").resize(windowResize);
58.     if (!h) {
59.         var n = $(window),
60.             bodyHeight = $("body").height();
61.         n.bind("scroll", function () {
62.             var a = n.scrollTop();
63.             if (a + $("body").height() < $("#wrapper").height()) $("#stoggle").stop().animate({
64.                 top: a + (bodyHeight - 63) / 2
65.             });
66.             else $("#stoggle").stop().animate({
67.                 top: a - $("#footer").outerHeight() + (bodyHeight - 63) / 2
68.             })
69.         })
70.     }
71.     $('a.minibutton').bind({
72.         mousedown: function () {
73.             $(this).addClass('mousedown')
74.         },
75.         blur: function () {
76.             $(this).removeClass('mousedown')
77.         },
78.         mouseup: function () {
79.             $(this).removeClass('mousedown')
80.         }
81.     });
82.     $("#tooltip").live("mouseover", function () {
83.         $(this).remove()
84.     });
85.     
86. });
87. 
    
88. function windowResize() {
89.     var a = $("#wrapper"),
90.         wrapheight = $("#wrapper").height(),
91.         contheight = $("#page-body .container").height(),
92.         sbcontHeight = $("#sbcont").outerHeight();
93.     if (contheight < sbcontHeight) contheight = sbcontHeight;
94.     if ($("body").height() >= contheight + $("#footer").outerHeight()) {
95.         var b = $("body").height() - $("#footer").outerHeight();
96.         a.css("min-height", b);
97.         $("#sidebar").css({
98.             "min-height": b
99.         })
100.     } else $("#sidebar").css({
101.         "min-height": contheight
102.     });
103. }

Thanks.

Matt