locked
Ajax Accordion - Expand one pane at a time RRS feed

  • Question

  • User2115914008 posted

    Hi All,

    I am using Ajax accordion, My scenario is only one pane needs to expand at a time others should be collapsed. How can I handle this scenario?

    Thanks

    Wednesday, September 10, 2014 6:54 AM

Answers

  • User541108374 posted

    Hi,

    you're looking for something like this: http://www.asp.net/ajaxLibrary/actcodesamples/Accordion/simple.aspx right?

    If that's the case then you can follow along with this article: https://ajaxcontroltoolkit.codeplex.com/wikipage?title=Creating%20a%20Simple%20Accordion&referringTitle=Accordion%20Control.

    Final code for that example:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AccordionSimple.Default" %>
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Simple Accordion</title>
        <style type="text/css">
            .accordion {
                width: 400px;
            }
            
            .accordionHeader {
                border: 1px solid #2F4F4F;
                color: white;
                background-color: #2E4d7B;
                font-family: Arial, Sans-Serif;
                font-size: 12px;
                font-weight: bold;
                padding: 5px;
                margin-top: 5px;
                cursor: pointer;
            }
            
            .accordionHeaderSelected {
                border: 1px solid #2F4F4F;
                color: white;
                background-color: #5078B3;
                font-family: Arial, Sans-Serif;
                font-size: 12px;
                font-weight: bold;
                padding: 5px;
                margin-top: 5px;
                cursor: pointer;
            }
            
            .accordionContent {
                background-color: #D3DEEF;
                border: 1px dashed #2F4F4F;
                border-top: none;
                padding: 5px;
                padding-top: 10px;
            }
        </style>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
       
    <asp:Accordion 
        ID="Accordion1" 
        CssClass="accordion"
        HeaderCssClass="accordionHeader"
        HeaderSelectedCssClass="accordionHeaderSelected"
        ContentCssClass="accordionContent" 
        runat="server">
    <Panes>
        <asp:AccordionPane runat="server">
            <Header>Pane 1</Header>
            <Content>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
            Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.            
            </Content>
        </asp:AccordionPane>
        <asp:AccordionPane ID="AccordionPane1" runat="server">
            <Header>Pane 2</Header>
            <Content>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
            Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
            </Content>
        </asp:AccordionPane>
        <asp:AccordionPane ID="AccordionPane2" runat="server">
            <Header>Pane 3</Header>
            <Content>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
            Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
            </Content>
        </asp:AccordionPane>
    </Panes>
    </asp:Accordion>
       
        </div>
        </form>
    </body>
    </html>

    Grz, Kris.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 10, 2014 7:30 AM

All replies

  • User541108374 posted

    Hi,

    you're looking for something like this: http://www.asp.net/ajaxLibrary/actcodesamples/Accordion/simple.aspx right?

    If that's the case then you can follow along with this article: https://ajaxcontroltoolkit.codeplex.com/wikipage?title=Creating%20a%20Simple%20Accordion&referringTitle=Accordion%20Control.

    Final code for that example:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AccordionSimple.Default" %>
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Simple Accordion</title>
        <style type="text/css">
            .accordion {
                width: 400px;
            }
            
            .accordionHeader {
                border: 1px solid #2F4F4F;
                color: white;
                background-color: #2E4d7B;
                font-family: Arial, Sans-Serif;
                font-size: 12px;
                font-weight: bold;
                padding: 5px;
                margin-top: 5px;
                cursor: pointer;
            }
            
            .accordionHeaderSelected {
                border: 1px solid #2F4F4F;
                color: white;
                background-color: #5078B3;
                font-family: Arial, Sans-Serif;
                font-size: 12px;
                font-weight: bold;
                padding: 5px;
                margin-top: 5px;
                cursor: pointer;
            }
            
            .accordionContent {
                background-color: #D3DEEF;
                border: 1px dashed #2F4F4F;
                border-top: none;
                padding: 5px;
                padding-top: 10px;
            }
        </style>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
       
    <asp:Accordion 
        ID="Accordion1" 
        CssClass="accordion"
        HeaderCssClass="accordionHeader"
        HeaderSelectedCssClass="accordionHeaderSelected"
        ContentCssClass="accordionContent" 
        runat="server">
    <Panes>
        <asp:AccordionPane runat="server">
            <Header>Pane 1</Header>
            <Content>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
            Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.            
            </Content>
        </asp:AccordionPane>
        <asp:AccordionPane ID="AccordionPane1" runat="server">
            <Header>Pane 2</Header>
            <Content>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
            Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
            </Content>
        </asp:AccordionPane>
        <asp:AccordionPane ID="AccordionPane2" runat="server">
            <Header>Pane 3</Header>
            <Content>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
            Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
            </Content>
        </asp:AccordionPane>
    </Panes>
    </asp:Accordion>
       
        </div>
        </form>
    </body>
    </html>

    Grz, Kris.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 10, 2014 7:30 AM
  • User2115914008 posted

    Thanks Mr.

    Wednesday, September 10, 2014 8:45 AM
  • User555306248 posted

    The Accordion is a web control that allows you to provide multiple panes and display them one at a time.  It is like having several CollapsiblePanels where only one can be expanded at a time.

    http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/accordion/accordion.aspx

    Thursday, September 11, 2014 12:28 AM