Expand Collapse all in Ajax Toolkit Accordion in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

How to expand all Accordion in AJAX Accordion in VB.NET

Currently I am using AjaxControlToolkit.20.1.0.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="pane.aspx.vb" Inherits="pane" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript">
        function collapseAll() {
            $("#ContentPlaceHolder1_myAccordion").find("div").each(function () {
                $(this).css("display", "none");
            });
        }
        function expandAll() {
            $("#ContentPlaceHolder1_myAccordion").find("div").each(function () {
                $(this).css("display", "unset");
            });
        }
    </script>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
        <asp:Button ID="buttonAdd" runat="server" Text="ExpandAll" OnClientClick="expandAll()" />
        / 
        <asp:Button ID="button1" runat="server" Text="CollapseAll" OnClientClick="collapseAll()" />
        <ajax:Accordion ID="myAccordion" runat="server" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent">
            <Panes>
                <ajax:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>1. Accordion</Header>
                    <Content>
                        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. The Accordion is implemented as a web control that contains
                    </Content>
                </ajax:AccordionPane>

                <ajax:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>2. AutoSize</Header>
                    <Content>
                        <p>It also supports three AutoSize modes so it can fit in a variety of layouts.</p>
                    </Content>
                </ajax:AccordionPane>

                <ajax:AccordionPane ID="AccordionPane3" runat="server">
                    <Header>3. Control or Extender</Header>
                    <Content>
                        The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit. 
                    </Content>
                </ajax:AccordionPane>
            </Panes>
        </ajax:Accordion>
    </form>
</asp:Content>

 

Posted one month ago

Hi rakeshkuma,

In latest version of AjaxToolKit Accordion control supports only one active pane at a time.

You can have all panes collapsed stage but only once can be active at a time.

For what you need, you can use multiple collapsible panels or alternative you can be use jquery Accordion.

HTML

<asp:Button Text="Expand all" class="accordion-expand-collapse" runat="server" />
<div id="accordion">
    <h3 class="accordion-header">&nbsp;&nbsp;&nbsp;&nbsp;1. Accordion</h3>
    <div>
        <p>
            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. The Accordion is implemented as a web control that contains
        </p>
    </div>
    <h3 class="accordion-header">&nbsp;&nbsp;&nbsp;&nbsp;2. AutoSize</h3>
    <div>
        <p>It also supports three AutoSize modes so it can fit in a variety of layouts.</p>
    </div>
    <h3 class="accordion-header">&nbsp;&nbsp;&nbsp;&nbsp;3. Control or Extender</h3>
    <div>
        <p>
            The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit.
        </p>
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script>
    $(function () {
        $("#accordion").accordion();
        $('.accordion-expand-collapse').on('click', function () {
            $('#accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
            $(this).val($(this).val() == 'Expand all' ? 'Collapse all' : 'Expand all');
            $(this).toggleClass('collapse');
            return false;
        });
    });
</script>