Collpasible menu needs all header needs to be closed on initial loading
- by Maju
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.
