If you are writing Web pages and find that you want to dynamically hide or show sections of your pages when the user interacts with the page, then the easiest way to do so is using JavaScript. In general it’s always best to avoid expensive round trips to the server by handling things client-side.
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 nice part of this code is that you can write a single generic JavaScript function to take care of the click events. The link elements themselves pass the name of the <div to open or close. Once in the JavaScript function, the JavaScript determines whether to toggle the passed <div to show or not-show.
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
From the example code below you can see that each anchor element activates the generic JavaScript function when it is clicked using the following syntax:
<a href="javascript:handleOpenClose('OpenOrCloseN1');">
In the function call the element passes the name of the <div element to toggle on or off. The JavaScript then handles the logic itself. First it gets a reference to the <div to manage and assigns it to a variable in the line:
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;
The function uses the short-form JavaScript if-else syntax to toggle the page element’s visibility. Rather than a standard if-else statement this takes the form of:
(condition) ? What to do if true : what to do if false ;
So the decision of visibility and assignment to the element’s style is achieved in the JavaScript line:
manageElement.style.display = (manageElement.style.display == "none") ? "inline" : "none";
Example Code
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.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function handleOpenClose(openCloseAction) {
var manageElement = document.getElementById(openCloseAction);
manageElement.style.display = (manageElement.style.display == "none") ? "inline" : "none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a href="javascript:handleOpenClose('OpenOrCloseN1');">Open/Close Div One</a>
<div id="OpenOrCloseN1" style="display:none;background-color:Yellow;">
The hidden div #1 is now open
</div>
<br />
<a href="javascript:handleOpenClose('OpenOrCloseN2');">Open/Close Div Two</a>
<div id="OpenOrCloseN2" style="display:none;background-color:Aqua;">
The hidden div #2 is now open
</div>
</form>
</body>
</html>
Justin Cooney 
1 thought on “JavaScript – Generic Function to Toggle Div Element Visible or Invisible”