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.

 <head>
 <Title>Toggle Sample</title>
 </head>
 <body>
 <script language="javascript">
 function toggleDisplay(id) {
 var obj = document.getElementById(id);
 obj.style.display = (obj.style.display == "none") ? "" : "none";
 return false; // cancel the href
 }
 </script>
 <h2> Some sample stuff</h2>
 <a href="#" onClick="return toggleDisplay('section1')">Stuff that Hides</a><br>
 <div id ="section1" style="display:none">
      Hello<br><!--  Say hello and build a simple table-->
      <table border="2">
      <tr>
      <td>
      A
      </td>
      <td>
      b
      </td>
      <td>
      C
      </td>
      </tr>
      <tr>
      <td>
      1
      </td>
      <td>
      2
      </td>
      <td>
      3
      </td>
      </tr>
 </table>
 <hr />
 </div>
 I do not hide!<br>
 
 </body>
</html>

You can show or hide the item by clicking on the element within the <a 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