Ajax Toolkit CollapsiblePanelExtender Expand Collapse all using JavaScript in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

can we achieve this task using server side control call "CollapsiblePanelExtender" ?

Expand Collapse all in Ajax Toolkit Accordion in ASP.Net

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago Modified on one month ago

Hi rakeshkuma,

Check this example. Now please take its reference and correct your code.

HTML

<form id="form1" runat="server" enctype="multipart/form-data" method="post">
    <section class="container-fluid block location-block">
        <div class="container">
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
            <asp:Button runat="server" Text="ExpandAll" OnClientClick="return expandAll();" CssClass="btn btn-default" />
            /<asp:Button runat="server" Text="CollapseAll" OnClientClick="return collapseAll();" CssClass="btn btn-default" />
            <div class="row">
                <div class="card card-body">
                    <div class="row">
                        <asp:Panel ID="pnlMouseClick" runat="server" CssClass="pnlCSS" onclick="SetClick()">
                            <div style="height: 35px; vertical-align: middle" class="Headercss">
                                <div style="float: left;">
                                    <h4>&nbsp;&nbsp;   <i class="fa fa-bars"></i>&nbsp;  1. Accordion</h4>
                                </div>
                                <div style="float: right; font-size: 10px; padding: 5px 5px 0 0">
                                    <asp:Label ID="lblMessage" runat="server" Text="" />
                                    <asp:Image ID="imgArrows" runat="server" />
                                </div>
                            </div>
                        </asp:Panel>
                        <asp:Panel ID="pnlCollapsable" runat="server" Height="0" CssClass="ContainCss">
                            <div class="col-md-12">
                                <div class="form-group">
                                    The Accordion is a web control that allows you to provide multiple panes and display them all at a time.
                                </div>
                            </div>
                        </asp:Panel>
                        <ajax:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="pnlMouseClick"
                            Collapsed="true" ExpandControlID="pnlMouseClick" CollapsedText="SHOW&nbsp;&nbsp;&nbsp;" ExpandedText="HIDE&nbsp;&nbsp;&nbsp;"
                            TextLabelID="lblMessage" ImageControlID="imgArrows" CollapsedImage="~/assets/plus.png"
                            ExpandedImage="~/assets/minus.png" ExpandDirection="Vertical" TargetControlID="pnlCollapsable" ScrollContents="false">
                        </ajax:CollapsiblePanelExtender>
                    </div>
                    <div class="row">
                        <asp:Panel ID="Panel1" runat="server" CssClass="pnlCSS" onclick="SetClick()">
                            <div style="height: 35px; vertical-align: middle" class="Headercss">
                                <div style="float: left;">
                                    <h4>&nbsp;&nbsp;   <i class="fa fa-bars"></i>&nbsp;  2. AutoSize</h4>
                                </div>
                                <div style="float: right; font-size: 10px; padding: 5px 5px 0 0">
                                    <asp:Label ID="lblMessage1" runat="server" Text="" />
                                    <asp:Image ID="Image1" runat="server" />
                                </div>
                            </div>
                        </asp:Panel>
                        <asp:Panel ID="pnlCollapsable1" runat="server" Height="0" CssClass="ContainCss">
                            <asp:UpdatePanel ID="SCPanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                                <ContentTemplate>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            It also supports three AutoSize modes so it can fit in a variety of layouts.
                                        </div>
                                    </div>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </asp:Panel>
                        <ajax:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" CollapseControlID="Panel1"
                            Collapsed="true" ExpandControlID="Panel1" CollapsedText="SHOW&nbsp;&nbsp;&nbsp;" ExpandedText="HIDE&nbsp;&nbsp;&nbsp;"
                            TextLabelID="lblMessage1" ImageControlID="Image1" CollapsedImage="~/assets/plus.png"
                            ExpandedImage="~/assets/minus.png" ExpandDirection="Vertical" TargetControlID="pnlCollapsable1" ScrollContents="false">
                        </ajax:CollapsiblePanelExtender>
                    </div>
                    <div class="row">
                        <asp:Panel ID="Panel2" runat="server" CssClass="pnlCSS" onclick="SetClick()">
                            <div style="height: 35px; vertical-align: middle" class="Headercss">
                                <div style="float: left;">
                                    <h4>&nbsp;&nbsp;   <i class="fa fa-bars"></i>&nbsp;  3. Control or Extender</h4>
                                </div>
                                <div style="float: right; font-size: 10px; padding: 5px 5px 0 0">
                                    <asp:Label ID="lblMessage2" runat="server" Text="" />
                                    <asp:Image ID="Image2" runat="server" />
                                </div>
                            </div>
                        </asp:Panel>
                        <asp:Panel ID="pnlCollapsable2" runat="server" Height="0" CssClass="ContainCss">
                            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                                <ContentTemplate>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit.
                                        </div>
                                    </div>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </asp:Panel>
                        <ajax:CollapsiblePanelExtender ID="CollapsiblePanelExtender3" runat="server" CollapseControlID="Panel2"
                            Collapsed="true" ExpandControlID="Panel2" CollapsedText="SHOW&nbsp;&nbsp;&nbsp;" ExpandedText="HIDE&nbsp;&nbsp;&nbsp;"
                            TextLabelID="lblMessage2" ImageControlID="Image2" CollapsedImage="~/assets/plus.png"
                            ExpandedImage="~/assets/minus.png" ExpandDirection="Vertical" TargetControlID="pnlCollapsable2" ScrollContents="false">
                        </ajax:CollapsiblePanelExtender>
                    </div>
                </div>
            </div>
        </div>
    </section>
</form>
<script type="text/javascript">
    function collapseAll() {
        all = false;
        $find("<%= CollapsiblePanelExtender1.ClientID %>")._doClose();
        $find("<%= CollapsiblePanelExtender2.ClientID %>")._doClose();
        $find("<%= CollapsiblePanelExtender3.ClientID %>")._doClose();
        return false;
    }
    function expandAll() {
        all = true;
        $find("<%= CollapsiblePanelExtender1.ClientID %>")._doOpen();
        $find("<%= CollapsiblePanelExtender2.ClientID %>")._doOpen();
        $find("<%= CollapsiblePanelExtender3.ClientID %>")._doOpen();
        return false;
    }
    function SetClick() {
        all = false;
    }
    var extenders = [];
    var all;
    function pageLoad(sender, args) {
        all = false;
        extenders[0] = $find("<%= CollapsiblePanelExtender1.ClientID %>");
        extenders[1] = $find("<%= CollapsiblePanelExtender2.ClientID %>");
        extenders[2] = $find("<%= CollapsiblePanelExtender3.ClientID %>");

        for (var i = 0; i < extenders.length; i++)
            if (extenders[i] != null)
                extenders[i].add_expandComplete(expandHandler);
    }

    function expandHandler(sender, args) {
        if (!all) {
            for (var i = 0; i < extenders.length; i++) {
                if ((extenders[i] != null) && (extenders[i] != sender)) {
                    extenders[i]._doClose();
                }
            }
        }
    }
</script>

Screenshot