homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Click to display , i.e. Show/Hide troubleshooting
I can show, but I want to hide...
mcjohnson




msg:3784475
 11:18 pm on Nov 11, 2008 (gmt 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.

 

astupidname




msg:3784509
 1:06 am on Nov 12, 2008 (gmt 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>

mcjohnson




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

SCORE! Thanks. Awesome.

Pat

astupidname




msg:3784530
 1:51 am on Nov 12, 2008 (gmt 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved