Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations MikeeOK on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Hiding DIVs 2
- Thread starter welshone
- Start date
-
1
- #2
Here is a very simple example using Javascript. The javascript forum can give you more ways of doing so.
<div id="one" style="visibility:hidden;">I'm hidden for now</div>
<div id="two" style="visibility:visible;">I'm visible for now</div>
<a href="#gonowhere" onclick="document.getElementById('one').style.visibility = 'visible';document.getElementById('two').style.visibility = 'hidden';">Click me!
</a> Gary Haran
<div id="one" style="visibility:hidden;">I'm hidden for now</div>
<div id="two" style="visibility:visible;">I'm visible for now</div>
<a href="#gonowhere" onclick="document.getElementById('one').style.visibility = 'visible';document.getElementById('two').style.visibility = 'hidden';">Click me!
</a> Gary Haran- Thread starter
- #3
-
1
- #4
In case you want to change the visibility in the backwards I added some code in xutopia's example.
Click two time on the link !
<html>
<head>
<script language="javascript">
function HideUnhide()
{
div1 = document.getElementById('one');
div2 = document.getElementById('two');
if (div1.style.visibility == 'hidden')
{
div1.style.visibility = 'visible';
div2.style.visibility = 'hidden';
}
else
{
div1.style.visibility = 'hidden';
div2.style.visibility = 'visible';
}
}
</script>
</head>
<body>
<div id="one" style="visibility:hidden;">I'm visible for now (div1)</div>
<div id="two" style="visibility:visible;">I'm visible for now (div2)</div>
<a href="#gonowhere" onclick="HideUnhide()">Click me!</a>
</body>
</html>
Hope this helps,
Erik <-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->
Click two time on the link !
<html>
<head>
<script language="javascript">
function HideUnhide()
{
div1 = document.getElementById('one');
div2 = document.getElementById('two');
if (div1.style.visibility == 'hidden')
{
div1.style.visibility = 'visible';
div2.style.visibility = 'hidden';
}
else
{
div1.style.visibility = 'hidden';
div2.style.visibility = 'visible';
}
}
</script>
</head>
<body>
<div id="one" style="visibility:hidden;">I'm visible for now (div1)</div>
<div id="two" style="visibility:visible;">I'm visible for now (div2)</div>
<a href="#gonowhere" onclick="HideUnhide()">Click me!
</a></body>
</html>
Hope this helps,
Erik <-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->
I give a star to boomerang for building upon my example. Gary Haran
- Status
Similar threads
