nested tags

[sunnny]

Hi,

Does anyone know how to access a nested tag from Javascript;

For Example:

<ul>
<li class="Main"><a href="#" onclick="SubMenu(this)">Quick Links</a>
<ul class="Item">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
</ul>

</li>
<li class="Main"><a href="#" onclick="SubMenu(this); return false;">Main Item Two</a>
<ul class="Item">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
</ul>
</li>

</ul>

How can I access the ul within the first li tag. I am trying to make a drop down menu using javascript. I want to click on the first li tag and hide the ul inside it and I don't want to hardcode it.

Any ideas? Also is there a getElementByClassName.

Thanks!
Sunny

[garann]

It seems like the easiest thing would be to do this in CSS: when the LI is clicked, change its class, and then set up the CSS like

li.MainHideUL ul.Item { display:none; }

However, you can get an array of the elements the LI contains using the

childNodes

property. Not sure how well it's supported, but you can loop through that looking for your class name or create a subset of that array using getElementsByTagName which gives you just the ULs.

[Bernard Marx]

Covered this a couple of days ago...

[webmasterworld.com...]

[sunnny]

Hi,

Thanks for your reply it really helps. I was wondering is there a way to see a list of all the objects and their methods and properties online or something like that, because when I am working I don't know which method to use. Like the childNode property I don't know what it is, so I think it will be good if I can understand the code I am using.Also then I can manipulate the code to my needs :).
Like the code does exactly what I want, but I don't understand it completely so I was wondering if you can help me:

//I understand this part
document.getElementsByTagName('html')[0].className = "scriptEnabled";

//What is parentNode
function togSub(link) {
var subListS = link.parentNode.getElementsByTagName('ul')[0].style;

//I don't understand this part
subListS.display = (!subListS.display )? 'block' : '';
}

By the way I took this code from discussion 4349 on webmasterworld.

Thankyou,
Sunny