expanding a menu
expanding a menu
I am using this menu code in my application:
http://www.mediamilan.com/tutos/how-to-create-simple-tree-structure-menu-using-jquery-and-css/
Modified for my app, of course.
I need to add, mostly for testing purposes because the menu is large, an "expand all" button.
The code for expanding a menu section upon clicking is this:
$(document).ready(function() {
//Class 'contentContainer' refers to 'li' that has child with it.
//By default the child ul of 'contentContainer' will be set to 'display:none'
$("#treeMenu li").toggle(
function() { // START FIRST CLICK FUNCTION
$(this).children('ul').slideDown()
if ($(this).hasClass('contentContainer')) {
$(this).removeClass('contentContainer').addClass('contentViewing');
}
}, // END FIRST CLICK FUNCTION
function() { // START SECOND CLICK FUNCTION
$(this).children('ul').slideUp()
if ($(this).hasClass('contentViewing')) {
$(this).removeClass('contentViewing').addClass('contentContainer');
}
} // END SECOND CLICK FUNCTIOn
); // END TOGGLE FUNCTION
}); // END DOCUMENT READY
******************************************************
My attempt to expand-all is not working:
function expandall() {
var els = document.getElementsByTagName('ul');
for( i = 0; i<els.length; i++) {
if (els[i].hasClass('contentContainer')) {
els[i].children('ul').slideDown(); }
els[i].removeClass('contentContainer').addClass('contentViewing');
}
}