Collpasible menu needs all header needs to be closed on initial loading
Posted
by Maju
on Stack Overflow
See other posts from Stack Overflow
or by Maju
Published on 2010-06-14T08:57:04Z
Indexed on
2010/06/14
9:02 UTC
Read the original article
Hit count: 276
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.
© Stack Overflow or respective owner