Javascript How To Show And Hide Content Onclick Expand Appear Disapear Link

Forums Index
» Javascipt Forums
» » Javascript How To Show And Hide Content Onclick Expand Appear Disapear Link

Javascript How To Show And Hide Content Onclick Expand Appear Disapear Link
Post Description:
Post Tags: javascript, how, to, show, and, hide, content, onclick, expand, appear, disapear, link
This Post Has Been Viewed 5882 Times Since Fri Apr 13, 2007 4:33 pm Posted By hostman with 5 replies

Javascript How To Show And Hide Content Onclick Expand Appear Disapear Link

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">

</script>
</head>

<body>
<h1>Hide and Show Javascript Code by <a href="http://www.wallpaperama.com">Wallpaperama.com</a></h1><hr>
<p> </p>

<div id="agent99" style="position:absolute; top:103px; left:153px;
visibility:hidden;">
<H1>Wallpaperama Rocks!!</H1>
</div>

<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.

Leave Your Comments [ dejar commentarios ]

Comments and replies About Javascript How To Show And Hide Content Onclick Expand Appear Disapear Link

:: 1 :: #1511 - Reply By travis On Fri Apr 13, 2007 4:53 pm

THIS ONE WORKS BETTER, I modified your code. here it is. this one is way better way to do what you were trying to do. when you click on the link it shows the content, but when you click on it again, it hides the page content.

<table width="90%" cellspacing="1" cellpadding="3" border="0" align="center">
<tr> 
	  <td><span class="genmed"><b>Code/Command:</b></span></td>
	</tr>
	<tr>
	  <td class="code"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br>
	    <html><br>
	    <head><br>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br>
	    <title>To See Or Not To See In Javascript</title><br>
	    <script language="javascript"><br>
	    <!--<br>
	    // PLEASE DO NOT REMOVE THIS. THANKS<br>
	    // FIND GREATE JAVASCRIPT CODES AT http://www.wallpaperama.com<br>
	    function toggleLayer( whichLayer )<br>
	    {<br>
var elem, vis;<br>
if( document.getElementById ) // this is the way the standards work<br>
elem = document.getElementById( whichLayer );<br>
else if( document.all ) // this is the way old msie versions work<br>
elem = document.all[whichLayer];<br>
else if( document.layers ) // this is the way nn4 works<br>
elem = document.layers[whichLayer];<br>
vis = elem.style;<br>
// if the style.display value is blank we try to figure it out here<br>
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)<br>
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';<br>
vis.display = (vis.display==''||vis.display=='block')?'none':'block';<br>
}<br>
//--><br>
</script><br>
<style type="text/css"><br>
<!--<br>
div#commentForm<br>
{<br>
margin: 0px 20px 0px 20px;<br>
display: none;<br>
}<br>
--><br>
</style><br>
</head>
<p><body><br>
<h1>Hide and Show Javascript Code by <a href="http://www.wallpaperama.com">Wallpaperama.com</a></h1><hr><br>
<p><a href="javascript:toggleLayer('commentForm');" >click me</a> to see and hide content!</p><br>
<p>&nbsp;</p><br>
<!-- HIDDEN INFORMATION TO BE SHOWN ONCLICK --><br>
<div id="commentForm"><br>
  HELLO I AM INSIEDE NOW<br>
</div><br>
<!-- END - HIDDEN INFORMATION TO BE SHOWN ONCLICK --><br>
<p align="center">Find Great Web Hosting For Your Site At <a href="http://www.webune.com">Webune.com</a> </p><br>
</body><br>
</html> </p></td>
	</tr>
</table>

:: 2 :: #1559 - Reply By bront On Sun Apr 15, 2007 8:43 pm

that's its just what i needed

:: 3 :: #1564 - Reply By 17seconds On Mon Apr 16, 2007 4:56 am

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?

:: 4 :: #1624 - Reply By scripter On Wed Apr 18, 2007 7:18 pm

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!

:: 5 :: #1632 - Reply By hilete On Thu Apr 19, 2007 11:23 am

yes, that's a very good idea. I would like to see something like: "Click here to open [+]" then "click here to close [-]"