• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 312
  • Last Modified:

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.
Mark Brady
Mark Brady
  • 2
  • 2
1 Solution
OnClick try using "this" instead of the id.
something like onclick=this.style.height = '25px'
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();this.style.height='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.

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now