Completely Free .NET word API

Resources » TypeScript » Scripting Languages

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

Updated: Category: Scripting Languages
Author: Member Level: GoldPoints: 30

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


Did you like this resource? Share it with your friends and show your love!

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 88 articles authored by srirama
Responses to "How to Open and Close for Dynamic Div Menus in Javascript."

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


Post 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:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)

    Type the numbers and letters shown on the left.

    Submit Article     Return to Article Index
    Subscribe to Subscribers
    Active Members
    TodayLast 7 Daysmore...

    Awards & Gifts
    Talk to Webmaster Tony John

    Online Members

    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India