Microsoft ASP.NET AJAX Control ToolKit: Accordion Panels in a Tab Container

· Articles

VJ, one of my readers, in response to another article, asked about being able to nest an Accordion Control within a Tab Container. In short, yes, it is possible:

   1:  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
   2:  <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
   3:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   4:  <html xmlns="http://www.w3.org/1999/xhtml">
   5:  <head runat="server">
   6:      <title>Microsoft ASP.NET AJAX Control ToolKit: Accordion Panels in a Tab</title>
   7:  </head>
   8:  <body>
   9:      <form id="form1" runat="server">
  10:          <asp:ScriptManager ID="ScriptManager1" runat="server" />
  11:          <div>
  12:              <ajaxToolKit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
  13:                  <ajaxToolKit:TabPanel ID="TabPanel1" runat="server" HeaderText="Content">
  14:                      <ContentTemplate>
  15:                          <ajaxToolKit:Accordion ID="Accordion1" runat="server">
  16:                              <Panes>
  17:                                  <ajaxToolKit:AccordionPane ID="AccordionPane1" runat="server">
  18:                                      <Header>
  19:                                          Lorem Ipsum
  20:                                      </Header>
  21:                                      <Content>
  22:                                          <p>
  23:                                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  24:                                              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  25:                                              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
  26:                                              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  27:                                              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
  28:                                              deserunt mollit anim id est laborum.
  29:                                          </p>
  30:                                      </Content>
  31:                                  </ajaxToolKit:AccordionPane>
  32:                                  <ajaxToolKit:AccordionPane ID="AccordionPane2" runat="server">
  33:                                      <Header>
  34:                                          The Cremation of Sam McGee
  35:                                      </Header>
  36:                                      <Content>
  37:  
 <p>
  38:                                              There are strange things done in the midnight sun By the men who moil for gold;
  39:                                              The Arctic trails have their secret tales That would make your blood run cold; The
  40:                                              Northern Lights have seen queer sights, But the queerest they ever did see Was that
  41:                                              night on the marge of Lake Lebarge I cremated Sam McGee. Now Sam McGee was from
  42:                                              Tennessee, where the cotton blooms and blows. Why he left his home in the South
  43:                                              to roam ‘round the Pole, God only knows. He was always cold, but the land of gold
  44:                                              seemed to hold him like a spell; Though he’d often say in his homely way that “he’d
  45:                                              sooner live in hell.” ...
  46:                                          </p>
  47:                                      </Content>
  48:                                  </ajaxToolKit:AccordionPane>
  49:                              </Panes>
  50:                          </ajaxToolKit:Accordion>
  51:                      </ContentTemplate>
  52:                  </ajaxToolKit:TabPanel>
  53:                  <ajaxToolKit:TabPanel ID="TabPanel2" runat="server" HeaderText="Empty">
  54:                      <ContentTemplate>
  55:                          <p>
  56:                              (This tab intentionally left "blank.")
  57:                          </p>
  58:                      </ContentTemplate>
  59:                  </ajaxToolKit:TabPanel>
  60:              </ajaxToolKit:TabContainer>
  61:          </div>
  62:      </form>
  63:  </body>
  64:  </html>

← All articles