How to Open and Close for Dynamic Div Menus in Javascript.

I will discuss an article how to Expandable and Collapsible with Snippet of Code Lines.In this Scenario The Main div Menu is in Static Design.The Sub div menus are added in dynamically by iterating the Dataset result in C# Code.i.e also incorporated with this.

In every software application/project you will have collapsible and expanded dynamic div menus based on the roles they are defined.And those sub menus are dynamically added to the Main div menu. So when one Menu item is Expanded the rest others will be in Collapsible Mode.So how to achieve this.I will illustrate here

The below Picture will give an idea how my Menu is

div menu control

The Below snippet of the Code will result the Main Picture.

This is the Main divMenu item

strSubMenuItem =
"a href=# runat=server onclick=ShowPnl('dv" + objdsFeatures.Tables[0].Rows[indexfeature]["APFTR_VAR_FTR_NAME"].ToString().Replace(" ", "") + "'))img src='"
+ objdsFeatures.Tables[0].
+ "' width=25 height=20 alt=Image"
+ objdsFeatures.Tables[0]
.Rows[indexfeature]["APFTR_VAR_FTR_NAME"].ToString() + "";

table cellpadding="0" cellspacing="0"
div class="menu" id="divMenu" runat="server"



The sub div menus are dynamically added in the main DivMenu which is a static in our application

if ((Session["MDUsers_dir"].ToString().ToLower() == "ltr"))


divMenu.InnerHtml = strMainItem;

So in this Code we are passing the divid which is going to expand in showpnl function

Two Menus Opened

The above figure shows that there are two Menu items are Opened.Why because i have clicked one Menu item and subsequently i clicked another both menu items are Expanded.But my intention is to only open one menu item at a time .The below is the javascript source code which will results that.

script language="javascript" type="text/javascript"
function ShowPnl(divName) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {

if (divs[i].id.indexOf('dv') != -1)
if (divs[i].style.display == "block")
divs[i].style.display = "none"

var objs = document.getElementById(divName);

if ( == "block") = "none";
else = "block";
return false;

This Above Code will iterate the Divs in your form.And it will search the divs which are having the indexof dv's.And i will check those divs are Expanded if expanded i made them to close.And i will pass dynamically as parameter(divid) from the Code Which i clicked from the Userinterface and i will expand that div

On the usage above snippet code will result like this...

Expandable and closed


Article by srirama
A Good advice from parent to a Child , Master to a Student , Scholar to an Ignorant is like a doctor prescribed pill it is bitter to take but when they take it will do all good for them --- Bhushan

Follow srirama or read 74 articles authored by srirama


No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: