Javascript How To Show And Hide Content Onclick Expand Appear Disapear Link
Posted On Fri Apr 13, 2007 By hostman In Javascipt Forums And Other Related Topics Discussion About Javascript Progamming Forums
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:
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:
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.<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>
Wallpaperama Rocks!!
click me to see my content!
Jj Sun Nov 20, 2011
If anyone stumbles across this and wonders why their text is shown when loading the page instead of hidden: make sure that you set the 'commentForm' id to "display: none;" in the CSS section.
rohit Thu Jun 30, 2011
actually I also need that type of sctipt thanxs for this
lauderl Tue Jan 18, 2011 
A good model can advance fashion by ten years - Yves Saint Lauren
ls-music.la
ls-music.la
jestin Fri Sep 24, 2010
it works with my mozilla firefox....thaks a lot
Ragith Thu Sep 16, 2010
Very nice code.It was working very fine, i also tried this code. Will u send me the collection of demos with code in javascript. I am very new for javascript.
thank u
thank u
cuaryos Wed Mar 03, 2010
look great, i'll try later. may greater if your demo more little long.
Geoff Wed Jan 06, 2010
"greate" isn't a word...
perrr Mon Oct 26, 2009
i want to post and hide videos, fm, etc. that it only shows the picture but when you click on it it opens and play the fm or the video. is there a html that i could copy paste the code and insert in the template?
please help !!! thank you.
please help !!! thank you.
michael Wed Jun 10, 2009
when the page loads....the text already displays by default...how can i edit the javascript to load without showing the text
dkmotion Sun May 31, 2009
he...
can anyone tell me how to link to a page where the show/hide function is embeded and how to control via the link if my div is visible or not?
thanx
can anyone tell me how to link to a page where the show/hide function is embeded and how to control via the link if my div is visible or not?
thanx
stevemn Sat Apr 04, 2009
do you have a code where it onclick show and hide records javascript
Hazem Tue Mar 24, 2009
thank you for this help... i found it useful and built on it...
thanks again
thanks again
hilete Thu Apr 19, 2007
yes, that's a very good idea. I would like to see something like: "Click here to open [+]" then "click here to close [-]"
scripter Wed Apr 18, 2007
How would you do it so instead of the dialog "click me" it appears "show" (in the link) by default and once you click on the link to show the hidden content the dialog link switches to "Hide". I know that this is possible so the question here is, do you think you could it? I greatly appreciate it if you could do it so.
Tnanks in advance!
Tnanks in advance!
17seconds Mon Apr 16, 2007
When I use this code, the page always loads with the hidden content already shown. In firefox and ie... same thing.
How can I make it load hidden?
How can I make it load hidden?
Related Content
Information
Forums »
Javascipt Forums And Other Related Topics Discussion About Javascript Progamming »
Javascript How To Show And Hide Content Onclick Expand Appear Disapear Link
Javascipt Forums And Other Related Topics Discussion About Javascript Progamming »
Javascript How To Show And Hide Content Onclick Expand Appear Disapear Link
Title: Javascript How To Show And Hide Content Onclick Expand Appear Disapear Link
Description: Javascript How To Show And Hide Content Onclick Expand Appear Disapear Link
Tags: javascript ,how ,to ,show ,and ,hide ,content ,onclick ,expand ,appear ,disapear ,link
Info: This Post Has Been Viewed 0 Times Since
Date: Fri Apr 13, 2007
Author hostman Received 17 Replies #791
Date: Fri Apr 13, 2007
Author hostman Received 17 Replies #791
Share
URL: 
Embed:
To embed this topic, just copy the code from the "Embed" box. Once you've copied the code, just paste it into your website or blog to embed it
BBCODE::
BBCODE is use on forums. You can put this code on all your BBCODE enabled forums like PhpBB, vBulletin® and others. Just Copy and Paste this code on your Posts and Replies on your forums
wallpaperama | Wallpapers | Forums | Terms Of Service
copyright © 2013 wallpaperama - All Rights Reserved - Last Updated Mon May 06, 2013 (-8 GMT)
Powered by: Webune Forums V5
copyright © 2013 wallpaperama - All Rights Reserved - Last Updated Mon May 06, 2013 (-8 GMT)
Powered by: Webune Forums V5