In this example we have two link elements that are click-able by the user. Each link element will show or hide a corresponding section of the Web page that has some example text. The sections to show/hide are HTML <div elements.
The same functionality of course can be written in several different ways, but most of these are more verbose and prone to breaking if something on the page changes.
Naturally the idea with this script is to expand on the code. If you are writing using ASP.NET at the server level, then you might use this code in a GridView control, or some sort of repeating list, or you could even use it to show custom page warning messages. The idea is that this functionality is simple to put in place and does not rely on any third party libraries.
How it Works
var manageElement = document.getElementById(openCloseAction);
Once this is in place, the function decides whether to make the div visible or invisible. As you are probably aware, you can make an HTML page element visible to the client by setting its style to: display:inline; Alternately to make an HTML page element invisible to the client you set its style to: display:none;
(condition) ? What to do if true : what to do if false ;
manageElement.style.display = (manageElement.style.display == "none") ? "inline" : "none";
As you can see, this is quite a flexible and simple way of handling the toggling of client-side page elements. Here is the full example code that will render a test page as shown in the image included with this article.