Using javascript to getElementBy - different methods

I have 8 div tags all with the same id.

<div id="menu-main">Products</div>
<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.
LVL 20
Mark BradyPrincipal Data EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

OnClick try using "this" instead of the id.
something like = '25px'

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mark BradyPrincipal Data EngineerAuthor Commented:
That works like a charm!  Thanks heaps. I used that and called a function after that to close up the rest.
Just for future reference I had to not reply on the style sheet. I included the style inside my php menu script instead and gave each menu item a different id like the attached code (menu.php)

Then in my html file I have a function :

function menuclose()
{ var i=1;
document.getElementById('menu-main'+ i).style.height = '30px';

and as you can see by the attached menu.php file, the onclick event is like this:


So it closes the other div's first, then opens the one which was clicked.

Thank you so much, I never thought of that!
<?php  // menus.php  This is where all the menus are created for each page

$sql = "SELECT * FROM `main_menus` ORDER BY `pos` ASC";
$main = mysql_query($sql)or die(mysql_error());
$x = 0;
While($row = mysql_fetch_array($main, MYSQL_ASSOC))
$group = "{$row['group']}";
$title = "{$row['title']}";
$link = "{$row['link']}";
$sub_add = "";

///////////////////////////// Get sub menu items /////////////////////////////////////////////
$sql1 = "SELECT * FROM `sub_menus` WHERE `group` = '$group' ORDER BY `pos` ASC";
$sub = mysql_query($sql1)or die(mysql_error());
While($row1 = mysql_fetch_array($sub, MYSQL_ASSOC))
$sub_title = "{$row1['title']}";
$sub_link = $link."{$row1['link']}";
$sub_add .= "<div id='menu-sub'><div id='menu-sub-text'><a href = '".$sub_link."' target='_self'>".$sub_title."</a></div></div>";
$sub_add .= "<div style='height:5px'></div>"; 
$menu .= "<div id='menu-main".$group."' style=\"position:relative;
	left      :16px;
	top       :10px;
	width     :200px;
	height    :auto;
      overflow    :hidden\" onclick=\"testing();'auto'\"><div id='menu-main-text'>".$title."</div>";
$menu .= $sub_add;
$menu .= "<div style='height:20px'></div></div>";

Open in new window

Mark BradyPrincipal Data EngineerAuthor Commented:
Excellent answer and excellent response!
Your welcome :)
Glad to have helped.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.