Welcome to WebmasterWorld Guest from 107.20.28.48

Forum Moderators: open

Message Too Old, No Replies

Click to display , i.e. Show/Hide troubleshooting

I can show, but I want to hide...

     
11:18 pm on Nov 11, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:July 8, 2004
posts: 175
votes: 0


I have a nice little script I have installed on a clients website consists of a four-button gif image. Each of the buttons, when clicked, displays a paragraph of "help" text. If you click button #1, it displays the paragraph of text. If you click button #1 again, it hides the text. If you click and open paragraph #1 and then click button #2, it shows paragraph #2 but continues to show paragraph #1

What I would like to do it figure out a way where, if Parah. #1 is showing, and you click button two, not only does paragraph #2 show, but para. #1 goes away.

Here's the header script:

<SCRIPT LANGUAGE="JavaScript">

function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}

</SCRIPT>

Here's the script that is connected to the image (with the image map coordinates):

<area shape="RECT" coords="102, 4, 229, 24" href="javascript:showHide('div1')" />
<area shape="RECT" coords="235, 4, 397, 25" href="javascript:showHide('div2')" />
<area shape="RECT" coords="405, 4, 508, 25" href="javascript:showHide('div3')" />
<area shape="RECT" coords="518, 4, 632, 25" href="javascript:showHide('div4')" />

and here's a sample of the DIV that displays:

<div id="div1" style="DISPLAY: none">Content of the Div that shows.</div>

Any help you can provide would be great.

1:06 am on Nov 12, 2008 (gmt 0)

Preferred Member

5+ Year Member

joined:Aug 18, 2008
posts:408
votes: 0


Plug this in the head and toss your other script:

<script type="text/javascript">
var idHolder;
function showHide(elementid){
if (idHolder != undefined && !idHolder.match(elementid)){
document.getElementById(idHolder).style.display = "none";
}
idHolder = elementid;
var isitshown = document.getElementById(elementid).style.display;
document.getElementById(elementid).style.display = (isitshown === "none")?"":"none";
}
</script>

1:36 am on Nov 12, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:July 8, 2004
posts: 175
votes: 0


SCORE! Thanks. Awesome.

Pat

1:51 am on Nov 12, 2008 (gmt 0)

Preferred Member

5+ Year Member

joined:Aug 18, 2008
posts:408
votes: 0


You are welcome, but, you know what? I just realized my brain farted. I made an error here, should not have used the match() method, should be doing direct comparison instead (between the idHolder and elementid). So please use this instead (I don't know what I was thinking! Using the match method would cause a mixup if one element has id "foo" and another one has id "footwo" as "foo" would be matched in the other id. Sorry if I am mixing you up, but the following is the correct way to go about it, really I'm not kidding this time!):

<script type="text/javascript">
var idHolder;
function showHide(elementid){
if (idHolder != undefined && idHolder != elementid){
document.getElementById(idHolder).style.display = "none";
}
idHolder = elementid;
var isitshown = document.getElementById(elementid).style.display;
document.getElementById(elementid).style.display = (isitshown === "none")?"":"none";
}
</script>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members