Resources » TypeScript » Scripting Languages

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


Posted Date: 11-Oct-2013  Last Updated:   Category: Scripting Languages    
Author: Member Level: Gold    Points: 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].
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



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) {
//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...

Expandable and closed

Attachments


div menu control

Two Menus Opened

Expandable and closed


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

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

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

Feedbacks      

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

    suraj
    More...
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India