Question

I have a menu that is being populated by a server and I have no access to the server. So I am limited to doing this on the client side.

Right now there is a dropdown menu on the navigation with 14 choices. The client wants to only show 3 of them.

They’re not using any frameworks like jquery or mootools, so I have to do this the old-fashioned way, yet, I’m at a wall.

<ul id='mylist'>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
<li>etc</li>
</ul>

What’s the javascript code to add display:none to list items 4-14?

(this also helps me get back to JS fundamentals and not relying on frameworks).

Thanks for your help!

Answer 1

You can do a getElementById() to get the menu, then getElementsByTagName() for the LIs which will return an array (say items[]).
And then change style for items[3] to items[13].

Edit

I made you a small code:

var menu = document.getElementById('mylist');
var LIs = menu.getElementsByTagName('li');
for(var i = 3; i< 14; i++)
    LIs[i].style.display='none';