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

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