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

getElementById function

I am having a small problem with this script
I have 5 Tpoic when you click any topic twice 2 time it's giving me problem
also I want to Hide this entire fuction in NE 4 only
Here is the code
<script langauge="javascript">
var showing = null;

function show(rowID) {
var tr = document.getElementById('tr'+rowID);
if (tr.className=="hide") {
 if (showing != null)
   showing.className = "hide";
 showing = tr;
else {

.hide        { visibility: hidden; display: none }
.show        { visibility: visible; display: block }
<body bgcolor="#FFFFFF" onLoad="show('1')">
<form name="form1" method="post" action="">
<table border=1 cellspacing=1 cellpadding=5 width="497">
<tr> <td><a style="cursor:hand" onclick="show('1')" href="#no"> Topic 1</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onclick="show('2')" href="#no">Topic 2</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onclick="show('3')" href="#no">Topic 3</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="show('4')" href="#no">Topic 4</a>
&nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="show('5')" href="#no">Topic 5</a></td></tr>
<tr id="tr1" class="hide"> <td>Information for Topic 1 here</td></tr>
<tr id="tr2" class="hide"> <td>Information for Topic 2 here</td></tr>
<tr id="tr3" class="hide"> <td>Information for Topic 3 here</td></tr>
<tr id="tr4" class="hide"><td>Information for Topic 4 here</td></tr>
<tr id="tr5" class="hide"><td>Information for Topic 5 here</td></tr>
Sanjiv Rajiv
Sanjiv Rajiv
  • 2
  • 2
1 Solution
You will have to use different code for hiding showing if you want it to work with NS4. Here is something to get you started:

<SCRIPT LANGUAGE=javascript>
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;

function switchDiv(strDivName,bolVisible){

 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName];
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName);
     if(!bolVisible) {
       objElement.visibility ="hidden"
     } else {
       objElement.visibility ="visible"
     if(!bolVisible) {
       objElement.style.visibility = "hidden";
     } else {
       objElement.style.visibility = "visible";


<FORM action="" method=POST id=form1 name=form1>
<p><INPUT type="button" value="Show" name=ShowMe onClick="switchDiv('myDiv',true)">
<INPUT type="button" value="Hide" name=HideMe onClick="switchDiv('myDiv',false)"></p>
<div id="myDiv" style="visibility:hidden;position:relative">
Text1<INPUT type="text" name="text1"><br>
Text2<INPUT type="text"  name="text2"><br>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>


Fritz the Blank
If it's NS4, just exit the function.

Your problem with the elements not showing correctly is with the following code:

if (showing != null)
  showing.className = "hide";

change it to say:

if (showing != null && showing != tr)
  showing.className = "hide";
Sanjiv RajivAuthor Commented:

You are almost close but
when you clik each Topic twice it opens and close
I Just what Open when you clik twice on any Topic
and then when you click another topic then it close

Let me Explain in more

This how i whant it

I have Topic 1 2 3 4 5

When page Loads I have Topic 1 opens

Now If you click Topic 1 while it's open it closeing the topic one ( I don't what it this way)

I just want to open when person click on any Topic twice
and have it close on if they go to Topic 2 3 4 5

I hope you understood if not  let me know


sp * 3 -- Let me try to get this straight. You want Topic 1 to load by default. Then, if a user double-clicks on another topic (say Topic 4), Topic 1 will be hidden and Topic 4 will be displayed. Correct? Then, if they double click on Topic 2, Topic 4 will be hidden and Topic 2 displayed.

If this is true you need to do two things. The first is to change the in the link from a "click" event to a double click event. Then, simply get rid of your "else" statement.
Sanjiv RajivAuthor Commented:

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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