 |
| TECH TUTORIALS |
|
Made by DowTek
Show Hidden Content with Javascript
Want to make some of the content on your webpage hidden until the user requests more information? It's easy, you can make html elements hidden using css and then display them at any time using javascript. Below, I will show you some sample code and demonstrate how to use it.
Code Demo:
Toggle Visibility
Here is the extra content
Javascript Code:
Toggle Visibility
function showHideDiv(id){
var obj = document.getElementById(id);
if (obj.style.display=="none"){
obj.style.display='block';
} else if(obj.style.display=="block"){
obj.style.display='none';
}
}
Usage Example: HTML with Inline CSS & Javascript:
Toggle Visibility
<a href="#" onclick="showHideDiv('div-1')">
Click here to Show more info
</a><br />
<div id="div-1" style="display:none;">
Here is the extra content
</div>
Usage Example Explanation:
(Red Code) To make an HTML link that will toggle the visibility of the extra content, in the onclick event for the link, use the showHideDiv javascript function above. The function will change the visibility of the element to either block or none depending on the current value of the elements display style. You call the function with the ID of the HTML DIV element that contains the extra content.
(Green Code) In the example above, the HTML DIV element with the extra content has the ID "div-1". When the page loads, the extra content will be hidden because the elements display style is set to none.
Notes:
There is always more then one way to accomplish a task, this example is just one way to get the job done.
Alternate Javascript Code:
Alternatively, you could have a separate function to either show or hide the content.
Hide Content
function hideDiv(id){
var obj = document.getElementById(id);
if (obj){
obj.style.display='none';
}
}
Show Content
function showDiv(id){
var obj = document.getElementById(id);
if (obj){
obj.style.display='block';
}
}
Alternate Code Demo:
Show Content |
Hide Content
Here is the extra content
|
Have you made a useful technical tutorial that you want to share?
Submit a tutorial and you will get free exposure.
You add your own link & description of your website. Tutorials do not have to be HTML format.
It can be .doc .pdf .rtf and other Windows compatible format text files.
Interested in having your tutorials listed on this page? Contact admin
|
|
|
|
|
|
