Home » Javascript

Javascript: Show/Hide HTML elements

27 November 2009 406 views Popularity: 1% Share/Bookmark

email

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:

  1. Javascript: Add Remove HTML elements
  2. Javascript: Show Hide textbox text on focus
  3. print_r in Javascript
  4. Javascript: How to Submit form and Change form action?
  5. How to get(view) html source code of a website
  6. Website statistic (User Information) in Javascript
  7. jQuery: Grey out background and preview image as popup
  8. Magento: Show/Hide Demo Store Notice
  9. Javascript: How to get current URL without Query string?
  10. PHP Javascript : Playing with multi-dimensional array
  • http://pulse.yahoo.com/_WXBKP2HWPEQSC2PMV5ALZUM3VM -OM KUKUY-

    Excuse me, I wanted to ask, how to make rotate image in PHP or HTML?
    please reply :(

    –Thank You Very Much–

  • Vynum

    Ya but were is the URL code? When someone clicks, how can I send them to a URL location? I want this action in my website but I want it when someone clicks a button/image link to actually load that URL/website inside of a . Could you please modifiy the code and show how this is done?