Collpasible menu needs all header needs to be closed on initial loading

I have a sidebar with collapsible menu it works fine but all the values come expanded the initial loading time.I want it to be closed on load and toggled th开发者_JAVA百科ereafter.

Here is the jquery used

// Sidebar Toggle
var fluid = {
Toggle : function(){
    var default_hide = {"grid": true };
    $.each(
        ["pagesnav", "commentsnav", "userssnav", "imagesnav"],
        function() {
            var el = $("#" + (this == 'accordon' ? 'accordion-block' : this) );
            if (default_hide[this]) {

                el.hide();
                $("[id='toggle-"+this+"']").addClass("hidden");

            }
            $("[id='toggle-"+this+"']")
            .bind("click", function(e) {
                if ($(this).hasClass('hidden')){
                    $(this).removeClass('hidden').addClass('visible');
                    el.slideDown();
                } else {
                    $(this).removeClass('visible').addClass('hidden');
                    el.slideUp();
                }
                e.preventDefault();
            });
        }
    );
}
}
jQuery(function ($) {
    if($("[id^='toggle']").length){fluid.Toggle();}
});

here is the html

<span class="ul-header"><a id="toggle-pagesnav" href="#" class="toggle visible">Content</a></span>
      <ul id="pagesnav">
        <li><a class="icn_manage_pages" href="#">Manage Pages</a></li>
        <li><a class="icn_add_pages" href="#">Add Pages</a></li>
        <li><a class="icn_edit_pages" href="#">Edit Pages</a></li>
        <li><a class="icn_delete_pages" href="#">Delete Pages</a></li>
      </ul>
      <!-- End Content Nav  --> 
      <!-- Start Comments Nav  --> 
      <span class="ul-header"><a id="toggle-commentsnav" href="#" class="toggle visible">Comments</a></span>
      <ul id="commentsnav">
        <li><a class="icn_manage_comments" href="#">Manage Comments</a></li>
        <li><a class="icn_add_comments" href="#">Add Comments</a></li>
        <li><a class="icn_edit_comments" href="#">Edit Comments</a></li>
        <li><a class="icn_delete_comments" href="#">Delete Comments</a></li>
      </ul>

here is the css used

.toggle {
    display:block;
}
.ul-header a.visible {
    background:url('../img/icons/small/toggle_close.png') no-repeat scroll 97% 50%;
}
.ul-header a.hidden {
    background:url('../img/icons/small/toggle_open.png') no-repeat scroll 97% 50%;
}

Please help.

This is the variable which is checked against to see if a block has to be hidden or not. var default_hide = {"grid": true };

Change it to

var default_hide = {"pagesnav": true, "commentsnav": true, "userssnav": true, "imagesnav": true}

and it should work.

Or you can remove this if:

if (default_hide[this])

I'd say the most efficient and painfree way to have them all initially collapsed is to specify them like that initially in the HTML. So add class="hidden" to each of your nav ul-s.