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

RegisterLogin

Webune Forums » Javascipt » 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: 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
This Post Was Posted On Feb 29, 2008 By web hosting #1409

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

Hide and Show Javascript Code by Wallpaperama.com

Wallpaperama Rocks!!

click me to see my content!

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

Related Pages: [Add Your Website]

Post New Topic

jovani

#2875 1

please send me a sample code for expand and hide code in html when a link is clicked

Nov 23, 2009 Reply Report abuse

hilete

#1853 2

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

Apr 19, 2007 Reply Report abuse

scripter

#1852 3

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!

Apr 18, 2007 Reply Report abuse

17seconds

#1851 4

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?

Apr 16, 2007 Reply Report abuse

bront

#1850 5

that's its just what i needed

Apr 15, 2007 Reply Report abuse

travis

#1849 6

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>

Apr 13, 2007 Reply Report abuse

Leave Your Comments...