script to toggle display of children of menu items on click

[jarrodprice]

I am trying to create a script for my left menu navigation that serves 3 functions:

1)On click of a parent list item, the display of the UL of its children should toggle from "none" to "block"
2)while the child display is still "none", hovering over the parent should change its A CLASS name from blank to "hover_highlight"
3)while the child display is set to "block", the parent's A CLASS should be "highlight".

The image for the "hover_highlight" CLASS has a plus symbol, while the image for the "highlight" CLASS is a minus symbol.

Parent LI's have the CLASS name of "parent", and only LI's with that CLASS name should be effected by this script.

The parent LI and child UL will have the same ID, with the child adding a "_g". So, if the parent UL is named "contactus" the child UL would be "contactus_g"

The effect is that hovering over menu items with children change its display to a plus symbol to indicate there are children, and clicking it show the children, and change the display of the parent to show a minus symbol. When you click the parent again, the children display is hidden, and the parent display image returns to normal (hovering shows a plus symbol)

<snip>

[edited by: engine at 11:25 am (utc) on Dec. 28, 2008]
[edit reason] See TOS [/edit]

[phranque]

welcome to WebmasterWorld [webmasterworld.com], jarrodprice!

after rereading your post i'm still not sure what your question is.
perhaps you could also post a sample of your best effort.
please read the forum code posting policy [webmasterworld.com] first.

[jarrodprice]

Thanks for the reply. In this simplified example below, I need the script to change the state of the list item on hover, and on click.

On hover (example 2), the A CLASS changes from "closed" to "hover", and on click over a parent list item (example 3), it's child UL CLASS changes a display of none to block, and the parent A CLASS chages from "hover" to "open". This should be a toggle, so that a second click on the parent changes the state back to example 1.

1)NORMAL MENU DISPLAY

<ul>
<li class="no children"><a id="menuitem1"href="#" class="closed">menuItem1</a></li>
<li class="no children"><a id="menuitem2"href="#" class="closed">menuItem2</a></li>
<li class="no children"><a id="menuitem3"href="#" class="closed">menuItem3</a></li>
<li class="parent"><a id="menuitem4" href="#" class="closed">menuitem4</a>
<ul class="menuitem4_child" style="display:none">
<li><a href="#">menuitem4a</a></li>
<li><a href="#">menuitem4b</a></li>
<li><a href="#">menuitem4c</a></li>
</ul>
</li>
</ul>

2)ON HOVER OVER "menuitem4"

<ul>
<li class="no children"><a id="menuitem1"href="#" class="closed">menuItem1</a></li>
<li class="no children"><a id="menuitem2"href="#" class="closed">menuItem2</a></li>
<li class="no children"><a id="menuitem3"href="#" class="closed">menuItem3</a></li>
<li class="parent"><a id="menuitem4" href="#" class="hover">menuitem4</a>
<ul class="menuitem4_child" style="display:none">
<li><a href="#">menuitem4a</a></li>
<li><a href="#">menuitem4b</a></li>
<li><a href="#">menuitem4c</a></li>
</ul>
</li>
</ul>

3)ON CLICK OF "menuitem4"

<ul>
<li class="no children"><a id="menuitem1"href="#" class="closed">menuItem1</a></li>
<li class="no children"><a id="menuitem2"href="#" class="closed">menuItem2</a></li>
<li class="no children"><a id="menuitem3"href="#" class="closed">menuItem3</a></li>
<li class="parent"><a id="menuitem4" href="#" class="open">menuitem4</a>
<ul class="menuitem4_child" style="display:block">
<li><a href="#">menuitem4a</a></li>
<li><a href="#">menuitem4b</a></li>
<li><a href="#">menuitem4c</a></li>
</ul>
</li>
</ul>