How to expand all Accordion in AJAX Accordion in VBNETCurrently I am using AjaxControlToolkit2010lt Register Assembly34AjaxControlToolkit34 Namespace34AjaxControlToolkit34 TagPrefix34ajax34 gtlt Page Title3434 Language34VB34 MasterPageFile34MasterPagemaster34 AutoEventWireup34false34 CodeFile34paneaspxvb34 Inherits34pane34 gtltaspContent ID34Content134 ContentPlaceHolderID34ContentPlaceHolder13

Hi rakeshkumaIn latest version of AjaxToolKit Accordion control supports only one active pane at a timeYou can have all panes collapsed stage but only once can be active at a timeFor what you need you can use multiple collapsible panels or alternative you can be use jquery AccordionHTMLltaspButton Text34Expand all34 class34accordionexpandcollapse34 runat34server34 gtltdiv id34accordion34gt lth3 class34accordionheader34gtampnbspampnbspampnbspampnbsp1 Accordionlth3gt ltdivgt ltpgt 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 ltpgt ltdivgt lth3 class34accordionheader34gtampnbspampnbspampnbspampnbsp2 AutoSizelth3gt

Expand Collapse all in Ajax Toolkit Accordion in ASP.Net

rakeshku...

SOLVED CLOSED ACTIVE ANSWERED
User: rakeshkuma
Posted: on Oct 20, 2020 04:32 AM
Forum: ASP.Net AJAX
Answer: 1
Views: 9315

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>

dharmend...

0 5

Reply
ANSWER
User: dharmendr
Replied: on Oct 21, 2020 05:08 AM
Report

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>

Expand Collapse all in Ajax Toolkit Accordion in ASP.Net

Company

Explore

Follow us

Contact Us