Asp.net Ajax Accordion control Outlook 2003 style

<ajaxToolkit:Accordion

ID="accordion" runat="server"

FadeTransitions="false" FramesPerSecond="100" TransitionDuration="250"

CssClass="accordion" HeaderCssClass="header" ContentCssClass="content"

RequireOpenedPane="True" AutoSize="None">

<Panes>

<ajaxToolkit:AccordionPane ID="mail" runat="server">

<Header>

<div style="background-image:url(_assets/img/mail_large.gif)">

<span>Mail</span>

</div>

</Header>

<Content>

<asp:ListView ID="lvMailItems" runat="server">

<LayoutTemplate>

<ul>

<li id="itemPlaceholder" runat="server" />

</ul>

</LayoutTemplate>

<ItemTemplate>

<li style='background-image:url(<%# Eval("ImageUrl") %>)'><%# Eval("Name") %></li>

</ItemTemplate>

</asp:ListView>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="notes" runat="server">

<Header>

<div style="background-image:url(_assets/img/notes_large.gif)">

<span>Notes</span>

</div>

</Header>

<Content>

<asp:ListView ID="lvNoteItems" runat="server">

<LayoutTemplate>

<ul>

<li id="itemPlaceholder" runat="server" />

</ul>

</LayoutTemplate>

<ItemTemplate>

<li style='background-image:url(<%# Eval("ImageUrl") %>)' title='<%# Eval("Name")%>'><%# Eval("Name") %></li>

</ItemTemplate>

</asp:ListView>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="contacts" runat="server">

<Header>

<div style="background-image:url(_assets/img/contact_large.gif)">

<span>Contacts</span>

</div>

</Header>

<Content>

<asp:ListView ID="lvContactItems" runat="server">

<LayoutTemplate>

<ul>

<li id="itemPlaceholder" runat="server" />

</ul>

</LayoutTemplate>

<ItemTemplate>

<li style='background-image:url(<%# Eval("ImageUrl") %>)' title='<%# Eval("Name")%>'><%# Eval("Name") %></li>

</ItemTemplate>

</asp:ListView>

</Content>

</ajaxToolkit:AccordionPane>

</Panes>

</ajaxToolkit:Accordion>

protected void Page_Load(object sender, EventArgs e)

{

FetchMailItems();

FetchNoteItems();

FetchContactItems();

}

private void FetchMailItems()

{

ArrayList mailItems = new ArrayList();

mailItems.Add(new { Name = "Mailbox", ImageUrl = "_assets/img/mailbox.gif" });

mailItems.Add(new { Name = "Inbox", ImageUrl = "_assets/img/inbox.gif" });

mailItems.Add(new { Name = "Drafts", ImageUrl = "_assets/img/drafts.gif" });

mailItems.Add(new { Name = "Outbox", ImageUrl = "_assets/img/outbox.gif" });

mailItems.Add(new { Name = "Junk Mail", ImageUrl = "_assets/img/junk.gif" });

mailItems.Add(new { Name = "Deleted Items", ImageUrl = "_assets/img/deleted.gif" });

mailItems.Add(new { Name = "Search Folders", ImageUrl = "_assets/img/search.gif" });

mailItems.Add(new { Name = "Sent Items", ImageUrl = "_assets/img/sentitems.gif" });

lvMailItems.DataSource = mailItems;

lvMailItems.DataBind();

}

private void FetchNoteItems()

{

ArrayList mailItems = new ArrayList();

mailItems.Add(new { Name = "Icons", ImageUrl = "_assets/img/note_small.gif" });

mailItems.Add(new { Name = "Note List", ImageUrl = "_assets/img/note_small.gif" });

mailItems.Add(new { Name = "Last Seven Days", ImageUrl = "_assets/img/note_small.gif" });

mailItems.Add(new { Name = "By Category", ImageUrl = "_assets/img/note_small.gif" });

mailItems.Add(new { Name = "By Color", ImageUrl = "_assets/img/note_small.gif" });

lvNoteItems.DataSource = mailItems;

lvNoteItems.DataBind();

}

private void FetchContactItems()

{

ArrayList mailItems = new ArrayList();

mailItems.Add(new { Name = "Address Cards", ImageUrl = "_assets/img/contact_small.gif" });

mailItems.Add(new { Name = "Detailed Address List", ImageUrl = "_assets/img/contact_small.gif" });

mailItems.Add(new { Name = "By Category", ImageUrl = "_assets/img/contact_small.gif" });

mailItems.Add(new { Name = "By Company", ImageUrl = "_assets/img/contact_small.gif" });

mailItems.Add(new { Name = "By Follow-up Flag", ImageUrl = "_assets/img/contact_small.gif" });

lvContactItems.DataSource = mailItems;

lvContactItems.DataBind();

}