Simple Toggle Visibility 1

Posted In JavaScript By Tony Virelli

This is a simple toggle visibility or show/hide function. I use it all the time.

First insert this function into the head section:

<script type="text/javascript">// <![CDATA[
 function toggle_visibility(id) {     var e = document.getElementById(id);     if(e.style.display == 'block'){         e.style.display = 'none';     }else{        e.style.display = 'block';     } }
// ]]>
</script>

Then use the code below to call the function:

<a onclick="toggle_visibility('foo');" href="#">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

Be Sociable, Share!

Tweet

1 comment

Guy says:

March 12, 2012 at 1:50 pm

Great idea. What I am looking for except, that selecting the toggle link causes my page to jump back to the top of the page, which is obviously a problem when the section to be shown or hidden is further down the page.

Reply