Rudy Rodarte . com

Information

This article was written on 23 Feb 2010, and is filled under ASP.NET.

Current post is tagged

, , ,

Javascript to Toggle Items

There are times when you will want to hide an item on a web page and activate the item only when the user clicks on an element. You can use a small bit of Javascript to display or hide the desired elements. In this example, I wrap up text, a table and a horizontal rule that I want to control inside of a <div> with an ID. The display of that <div> is controlled by the javascript function.


 
 Toggle Sample
 
 
 <script language="javascript">
 function toggleDisplay(id) {
 var obj = document.getElementById(id);
 obj.style.display = (obj.style.display == "none") ? "" : "none";
 return false; // cancel the href
 }
 
 

Some sample stuff

href="#" onClick="return toggleDisplay('section1')">Stuff that Hides
id ="section1" style="display:none"> Hello
A b C
1 2 3

I do not hide!

You can show or hide the item by clicking on the element within the href=“#” …>, which is just text in this case. However, you can use other elements as well.

Rudy

Rudy Rodarte is a SQL Server Database professional based in Austin, TX. Over his career, Rudy has worked with SSRS, SSIS, performance tuning troubleshooting. When away from Keyboard, Rudy goes to Spurs and Baylor Bear sporting events.

More Posts - Website - Twitter

Leave a Reply