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
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].
Rows[indexfeature]["APFTR_VAR_IMAGEURL"].ToString()
+ "' width=25 height=20 alt=Image"
+ objdsFeatures.Tables[0]
.Rows[indexfeature]["APFTR_VAR_FTR_NAME"].ToString() + "";
table cellpadding="0" cellspacing="0"
tr
td
div class="menu" id="divMenu" runat="server"
div
td
tr
table
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"))
{
}
else
{
}
divMenu.InnerHtml = strMainItem;
So in this Code we are passing the divid which is going to expand in showpnl function
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) {
//alert();
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 (objs.style.display == "block")
objs.style.display = "none";
else
objs.style.display = "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...
Attachments
Follow