Javascript Expanding Menu query

[srlagarto]

Hi, there.

I have a simple existing CSS rollover menu that I've recently added sub-level options to, using Javascript to expand a group with one click using the 'show' command and another click to contract it again with the 'hide' command.

I'm a total newbie to Javascript, so was wondering if anyone out there knew of an easy way to automatically contract all of the expanded groups when clicking on one of the other unexpanded ones - as opposed to having to 'hide' everything manually?

Any help or advice that anyone can offer greatfully appreciated!

[Eldarrion]

Assign a class upon doing a show... not sure which framework we're discussing, but considering the topic, I'm guessing jQuery? Or is it something else? Anyways... after assigning a class on show, you can easily call that class and hide everything that has it, then clear it and after that assign it to the newly opened menus.

[srlagarto]

Originally Posted by Eldarrion

Assign a class upon doing a show... not sure which framework we're discussing, but considering the topic, I'm guessing jQuery? Or is it something else? Anyways... after assigning a class on show, you can easily call that class and hide everything that has it, then clear it and after that assign it to the newly opened menus.

Thanks for the quick response, but as a newbie I'm not entirely sure how to apply your recommendation! My Javascript code is from a Tutorial at tutorials-db.com, but doesn't seem to say what framework it is :

function display (category) {
var whichcategory = document.getElementById(category);
if (whichcategory.className=="show") {
whichcategory.className="hide";
} else {
whichcategory.className="show";
}
}

and (a portion of) the HTML is :

<a href="javascript:display('Services')" class="Group">Services</a>
<div class="hide" id="Services">
<a href="#" class="Option">Service 1</a>
<a href="#" class="Option">Service 2</a>

How do I assign a class to 'show'?

[Eldarrion]

Nope, no framework involved, looks like clean JS. Either way, as it seems, you are already assigning the class there with .className Now for the more interesting part... finding each element that is currently visible and hiding it:

<script type="text/javascript">
function display (category) {
    var whichcategory = document.getElementById(category);
    var showClass = "show";
   
    var all = document.getElementsByTagName('*');

    var shown = new Array();
    for (var e = 0; e < all.length; e++) {
        if (all[e].className == showClass)
            shown[shown.length] = all[e];
    }

    if (whichcategory.className == showClass)
        whichcategory.className = "hide";
    else {
        for (var i = 0; i < shown.length; i++)
            shown[i].className = "hide";
        whichcategory.className = showClass;
    }
}
</script>

Probably _not_ the best way to do it... and I'm not sure exactly how it will play out with nested locations, but I believe it can be modified to ignore elements that are parent elements of the one you're currently trying to show.

[Eldarrion]

And here is the code that will take into account for a currently visible parentNode and avoid hiding it:

<script type="text/javascript">
function display (category) {
	var whichcategory = document.getElementById(category);
	var showClass = "show";
   
	var all = document.getElementsByTagName('*');

	var shown = new Array();
	for (var e = 0; e < all.length; e++) {
		if (all[e].className == showClass)
			shown[shown.length] = all[e];
	}

	if (whichcategory.className == showClass)
		whichcategory.className = "hide";
	else {
		for (var i = 0; i < shown.length; i++) {
			if (shown[i] != whichcategory.parentNode) {
				shown[i].className = "hide";
			}
			whichcategory.className = showClass;
		}
	}
}
</script>

Should work like a charm... with 1-level nesting. Once again, might be a better way. (I certainly know a better one using jQuery, but not pure JS) Though for the purposes, this one should work.

[srlagarto]

Originally Posted by Eldarrion

And here is the code that will take into account for a currently visible parentNode and avoid hiding it:

<script type="text/javascript">
function display (category) {
	var whichcategory = document.getElementById(category);
	var showClass = "show";
   
	var all = document.getElementsByTagName('*');

	var shown = new Array();
	for (var e = 0; e < all.length; e++) {
		if (all[e].className == showClass)
			shown[shown.length] = all[e];
	}

	if (whichcategory.className == showClass)
		whichcategory.className = "hide";
	else {
		for (var i = 0; i < shown.length; i++) {
			if (shown[i] != whichcategory.parentNode) {
				shown[i].className = "hide";
			}
			whichcategory.className = showClass;
		}
	}
}
</script>

Should work like a charm... with 1-level nesting. Once again, might be a better way. (I certainly know a better one using jQuery, but not pure JS) Though for the purposes, this one should work.

Wow - that first script DOES work like a charm - thanks! I can't seem to get this second one to work, though - am I doing something wrong? Just seems to be the last few lines that are different, but for whatever reason the script appears to stop working altogether.

I'm very grateful for your prompt assistance and would certainly be interested in learning more about jQuery, if you feel that is the better framework to use - any pointers for resource / tutorials?