I have 8 div tags all with the same id.
<div id="menu-main">Services</div> etc...etc...
In my style sheet the menu-main has the styling info for those divs. Pretty basic stuff so far.
In my HTML page I need to size certain <div's> that are set to height:auto; in the style sheet. For eg: one of the divs might be 150px high but when the form loads I need it to be 25px high. Easy enough, I wrote a small function to getElementById('menu-main').style.height = '25px');
Works good and it will size all my <div's> to 25px if the id is correct.
Now where the problem is, is I need to be able to click on each div and have it expand (like a dropdown menu). But if I click on the 3rd div down, how do I differentiate between them in my function? They all have the same id because of styling and I can't have different styles because the user can dynamically add menu items though php and mysql but I can't have anything added to the style sheets (to messy).
I have tried giving each item a tag name and or giving each div a name value which is unique but I can't call them from a function. What am I doing wrong?
As a footnote, this is in fact a dropdown menu. When the page loads, only the main menu buttons are shown. As you click on each one, the sub menu drops down (which is just inside the main-menu div tag). When you click on each main menu item all the others resize to 25px (close).
The menu items are created inside a php script and each item is called from the database so I can give them different names or tag names but not styles.
Thanks in advance.