Example:
or Click Here
What we will use is:
- CSS
- JavaScript
- Div tag
How to make an image or text hidden.
1. Put this in your css
.hidden { display: none; }
.unhidden { display: block; }
OR if you dont know where your css is paste it anywhere like this
<style>
.hidden { display: none; }
.unhidden { display: block; }
</style>
2. Make you text/image hidden
<div id="hide01" class="hidden">
Put your Hidden Text or Images Here
</div>
How to display the hidden text/images
1. Paste this script somewhere into your webpages
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
2. Make a link to toggle hidden text/images
<a href="javascript:unhide('hide01');">Click Here</a>OR you can also use images as the link
<a href='javascript:unhide('hide01');' title='Chat Box'><img src='http://4.bp.blogspot.com/-34YAu1fx'/></a>
That's it!
This is how the code would look like in a single page;
<head>
<style>
.hidden { display: none; }
.unhidden { display: block; }
</style>
</head>
<body>
<a href="javascript:unhide('hide01');">Click This</a>
<div id="hide01" class="hidden">
Put your Hidden Text or Images Here
</div>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
</body>
