- Forums
- Javascipt
- Javascript How To Show And Hide Content Onclick Expand Appear Disapear Link
This Page Contains information about Javascript How To Show And Hide Content Onclick Expand Appear Disapear Link By wallpaperama in category Javascipt with 17 Replies. [791], Last Updated: Sat May 18, 2024
wallpaperama
Fri Apr 13, 2007
17 Comments
43176 Visits
today i wanted to write a page where i would put a link and once a user clicks on that link, i want my content to show.
For example, i have page where i would put a link that says:
QUOTE:
click me to see my content!
And the content i want it to show once someone click on it is this:
QUOTE:
Wallpaperama Rocks!!
Well, to do that, i found this cool javascript widget or snippet or whatever you want to call it. so this is how the javascript script code looks like:
CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hide and Show Javascript Code</title>
<script language="javascript">
<!--
// PLEASE DO NOT REMOVE THIS. THANKS
// FIND GREATE JAVASCRIPT CODES AT http://www.wallpaperama.com
var state = 'hidden';
function showhide(layer_ref) {
if (state == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
}
}
//-->
</script>
</head>
<body>
<h1>Hide and Show Javascript Code by <a href="http://www.wallpaperama.com">Wallpaperama.com</a></h1><hr>
<p> </p>
<!-- HIDDEN INFORMATION TO BE SHOWN ONCLICK -->
<div id="agent99" style="position:absolute; top:103px; left:153px;
visibility:hidden;">
<H1>Wallpaperama Rocks!!</H1>
</div>
<!-- END - HIDDEN INFORMATION TO BE SHOWN ONCLICK -->
<p> </p>
<p><a href="javascript://" onclick="showhide('agent99');">click me</a> to see my content!
</p>
<p> </p>
<p align="center">Find Great Web Hosting For Your Site At <a href="http://www.webune.com">Webune.com</a> </p>
</body>
</html>
now to see this script in action to see how it works, all you have to do is to copy and save this sample code into your text editor like notepad. Once you have copied and pasted my code into notepad, save it as wallpaperama.html and upload to your wesbite, then open it with your browser and you will how it works.
Wallpaperama Rocks!!
click me to see my content!