Joe Levi:
a cross-discipline, multi-dimensional problem solver who thinks outside the box – but within reality™

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

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>
Share

You may also like...

3 Responses

  1. VJ says:

    wo…great…..thank you so much..^^

  2. Joe says:

    Glad I could help!

    Also of note, Microsoft’s ASP.NET AJAX Futures has been updated and includes some additional Silverlight-compatible features (download the Microsoft ASP.NET Futures (July 2007) Release here): http://www.joelevi.com/blog/index.php/2007/07/30/silverlight-10-rc1-released/

    http://www.JoeLevi.com

  3. Tom says:

    I have an Accordion within a Tab container and it works until I set the Accordion AutoSize to Fill or Limit, then my Accordion disappears. I get the same result with IE7, FireFox 2.0.0.8 and Opera 9.24. Is it possible, or at least supposed to be possible to do this? Any help would be much appeciated!

    Tom

Leave a Reply