Problem with onClick script

[Partizan]

Hi,

Does anyone know how I can edit this script to meet my requirements?

The code below reveals the hidden text "Hello Joe" when the user clicks on the hyperlink "TEST-LINK1".

This works fine, however, I also would like previously revealed text (HELLO JOE) to be rehidden when the user clicks on another hyperlink, eg "TEST-LINK2" below which reveals the text "BYE JOE".

Any ideas on how to do this?

SCRIPT:

PHP Code:

<!-- ############# REVEAL HIDDEN TEXT ############# -->
<script language="javascript" type="text/javascript">
function displayDiv()
{
var dv = document.getElementById("revealonclick");
dv.style.display = ( dv.style.display != "block" ) ? "block" : "none";
}
</script>
<!-- ############# END REVEAL HIDDEN TEXT ############# --> 


BODY:

PHP Code:


<span onclick="displayDiv('revealonclick1'); return false;">TEST-LINK-1</span>
<div id="revealonclick1">  

HELLO JOE

</div>


<span onclick="displayDiv('revealonclick2'); return false;">
TEST-LINK-2
</span>

<div id="revealonclick2">  

BYE JOE 

</div> 


CSS:

PHP Code:

#revealonclick{display:none;} 
#revealonclick1{display:none;} 
#revealonclick2{display:none;} 
#revealonclick3{display:none;} 


[alykins]

CSS

.HideMe {display:none;}

html

<span onclick="DisplayBox(1)"> Test One! </span>
<div id="BoxToBeDisplayed1" class="HideMe">
text
</div>

<span onclick="DisplayBox(2)"> Test Two! </span>
<div id="BoxToBeDisplayed2" class="HideMe">
text
</div>

javascript

<script type="text/javascript">
function DisplayBox(index)
{
HideAll();
var box = "BoxToBeDisplayed" + index;
document.getElementByID(box).style.display = "block";
}

function HideAll()
{
document.getElementByClass("HideMe").style.display="none";
}
</script>

should work but didn't test

Edit: Also should have been posted in javasript forum

[Partizan]

alykins, thank you for the feedback and your help. Also, apologies for not posting it in the Javascript section.

I am just trying to get it to work and have a few basic questions.

1. is this script meant to replace the script I had, or is it to be added to it?
2. do I need to add

#BoxToBeDisplayed1{display:none;}
#BoxToBeDisplayed2{display:none;}

to the css file, or something in addition to .HideMe {display:none;} ?

Thanks!

[alykins]

replaces all you had... let's go through the logic of it

onload all the boxes have class HideMe applied with display none, therefore no box will be displayed. On the click you send the index of the box you are targeting to the script function. The function fires, calls the other function (HideAll) which will go through and re-hide all boxes with that class (therefore hiding any shown boxes) then it will go through and un-hide the desired box

(*or at least it should *)

[Partizan]

alykins,

thanks for the explanation!

I have copied the code word for word but it is not yet working...

fyi, I have placed the script between HEAD tags.

[tqmd1]

Sir, did you see my this thread?

http://www.codingforums.com/showthread.php?t=243811

this is smiliar to current thread but i could not get proper solution.

Please guide me also.

Thanks

[alykins]

Originally Posted by tqmd1

Sir, did you see my this thread?

http://www.codingforums.com/showthread.php?t=243811

this is smiliar to current thread but i could not get proper solution.

Please guide me also.

Thanks

yes i did see that link- and I also followed it- why you have so much preventative "security" around your source code is beyond annoying but seeing scripts that (on first glance didn't really peruse them) seem to try and search my cookies for user info I would suggest no one else go to this link-

Edit: Investigated it some more and it is behind a forum login thingy and the user id scripts and what not are not malicious; it is a required login site crap- can you post your code that you are trying in your thread- no one is helping because you have made it difficult to help