...

View Full Version : Changing content within a page



hyperman299
07-15-2009, 09:26 PM
Hi,

I want to be able to show some content, while at the same time hide some other content using JS. Can anyone help me with this?

ckeyrouz
07-15-2009, 09:26 PM
Can you please post some more details on the content and the page to be able to help you in an accurate way.

hyperman299
07-15-2009, 09:47 PM
Sorry if I wasn't clear.

For example:



[a button here]

[some text here, showing (lets call this text 1) ]

[some text here, hidden (lets call this text 2)]


and when you click the button



[a button here]

[text 2 here, showing]

[text 1 here, hidden]


If i am being confusing, please let me know. Thanks for the help!

ckeyrouz
07-15-2009, 09:50 PM
You put your text in an html tag <label id='label1'> and <label id='label2'> for example.
when you click on the button set a function named btnClicked() like this:



function btnClicked()
{
document.getElementById("label1").style.display = "";
document.getElementById("label2").style.display = "none";
}

hyperman299
07-15-2009, 09:56 PM
Thanks very much for your reply! Luckily, I found some code that worked perfectly for me!



<html>
<head></head>
<body>

<div>
<!--put your links here-->
<a href=#stayhere id=a1 onclick="showhide(this.id);">first link</a>
<a href=#stayhere id=a2 onclick="showhide(this.id);">second link</a>
<a href=#stayhere id=a3 onclick="showhide(this.id);">third link</a>
<!--end where you put your links-->
<div>
<!--put all your divs here-->
<div id=a1div style="display:none;background-color:red;width=100px;height=100px;">first div</div>
<div id=a2div style="display:none;background-color:blue;width=100px;height=100px;">second div</div>
<div id=a3div style="display:none;background-color:green;width=100px;height=100px;">third div</div>
<!--end where you put your divs-->
</div>
</div>

</div>

<script type=text/javascript>
function showhide(Id){
var Par=document.getElementById(Id).parentNode;
var count='3'
i='0';
while(i<=count){
var childlngth=Par.childNodes.length-1;
Par.childNodes[childlngth].childNodes[i].style.display="none";
i++;
}
document.getElementById(Id+"div").style.display="block";
}

</script>

</body>
</html>


Thanks again for all of your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum