In web application accordion is a very nice using. By using that you can make you website good looking and in a small space you cam put many things. Here am giving you example of a dynamic Accordion which i am loading from a XML file.
To create that using AjaxControlToolkit. In AjaxControlToolkit a control named Accordion is available , i have just load this dynamically and reading data from XML.
Here are the coder to read data from XML and Load accordion dynamically
Accordion accordion = new Accordion();
accordion.ID = “AccordionID”;
accordion.SelectedIndex = 0;
accordion.FadeTransitions = true;
accordion.FramesPerSecond = 50;
accordion.TransitionDuration = 250;
accordion.SuppressHeaderPostbacks = true;
string _path = HttpContext.Current.Server.MapPath(@”Sitemap.xml”);
FileStream stream = new FileStream(_path, FileMode.Open , FileAccess.Read, FileShare.ReadWrite);
XmlDocument document = new XmlDocument();
document.Load(stream);
XmlNodeList nodeList = document.GetElementsByTagName(“Item”);
for (int i = 0; i < nodeList.Count; i++)
{
AccordionPane accorPane = new AccordionPane();
Label lbl = new Label();
lbl.ID = “lblControl”;
lbl.Text = nodeList[i].Attributes["name"].Value;
lbl.Width = 200;
lbl.BackColor = System.Drawing.Color.Wheat;
lbl.Style.Add(HtmlTextWriterStyle.MarginBottom, “3px”);
accorPane.HeaderContainer.Controls.Add(lbl);
for (int j = 0; j < nodeList[i].ChildNodes.Count; j++)
{
string name = nodeList[i].ChildNodes[j].Attributes["name"].Value;
Label lbl2 = new Label();
lbl2.ID = “lblControl2″;
lbl2.Text = name;
lbl2.Width = 195;
lbl2.BackColor = System.Drawing.Color.WhiteSmoke;
lbl2.Style.Add(HtmlTextWriterStyle.MarginBottom, “2px”);
lbl2.Style.Add(HtmlTextWriterStyle.PaddingLeft, “5px”);
HyperLink hl = new HyperLink();
accorPane.ContentContainer.Controls.Add(lbl2);
accorPane.ContentContainer.Controls.Add(new LiteralControl(“<br/>”));
}
accordion.Panes.Add(accorPane);
}
PlaceHolder1.Controls.Add(accordion);
stream.Close();


Nice post…
আমি এখন থেকে তোমার সাইটে ঢু মারব শেখার জন্য
hehe thanku vaia. ami guchia likte pari na kichu akta korle just likhe rakhi
Somehow i missed the point. Probably lost in translation
Anyway … nice blog to visit.
cheers, Benediction.
Nice article man , and in general nice Blog keep going
Thanks Yasser for you comment on my blog post and blog.
very good!
its working upto two level hirarchy of data but how to add more contentpane in headercontentpane
Adding following css will make it much better..
/* Accordion */
.accordionHeader
{
border: none;
color: white;
background-image: url(images/button1.png);
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 3px;
color:Blue;
margin-top: 3px;
cursor: pointer;
}
#master_content .accordionHeader a
{
color: #FFFFFF;
background: none;
text-decoration: none;
}
#master_content .accordionHeader a:hover
{
background: none;
text-decoration: underline;
}
.accordionHeaderSelected
{
border:none;
color: white;
background-image: url(images/button12.png);
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 3px;
color:Blue;
margin-top: 3px;
cursor: pointer;
}
#master_content .accordionHeaderSelected a
{
color: #FFFFFF;
background-image:url(image/backcolor2.png);
text-decoration: none;
}
#master_content .accordionHeaderSelected a:hover
{
background: none;
text-decoration: underline;
}
.accordionContent
{
background-color:rgb(200,213,255);
border: none;
border-top: none;
padding: 2px;
padding-top: 2px;
}
.selectedbutton
{
text-decoration:none;
color:Blue;
}
.panecss
{
}
excellent. thanks for your contribution.
Nice job, thx..
Maybe it’s a good idea to put the some content of the XML file used to fill the panes..