Javascript: Show/Hide HTML elements
Here, I will be demonstrating on showing or hiding a div when a link is clicked. I have done this with Javascript and CSS.
I have called showHideDiv() Js function when the link is clicked. The display of the div where content is present, is visible or hidden on each click. For this, CSS styling is used (display: none).
The code follows:
<div>
<a onclick="showHideDiv()" style="cursor:pointer">Show / Hide</a>
<div id="addTag" style="display:none">This is a test.</div>
</div>
<script type="text/javascript" language="javascript">
function showHideDiv()
{
if(document.getElementById('addTag').style.display == "none") {
document.getElementById('addTag').style.display = "";
}
else {
document.getElementById('addTag').style.display = "none";
}
}
</script>
Try, Implement and Enjoy!
Related posts:
- Javascript: Add Remove HTML elements
- Javascript: Show Hide textbox text on focus
- print_r in Javascript
- Javascript: How to Submit form and Change form action?
- How to get(view) html source code of a website
- Website statistic (User Information) in Javascript
- jQuery: Grey out background and preview image as popup
- Magento: Show/Hide Demo Store Notice
- Javascript: How to get current URL without Query string?
- PHP Javascript : Playing with multi-dimensional array
