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

Question

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 thereafter.

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.

Answer 1

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.

Answer 2

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])