Hi rakeshkuma,
Refer below sample.
HTML
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<section class="container-fluid block location-block">
<div class="container">
<ajax:ToolkitScriptManager runat="server" EnablePageMethods="true"></ajax:ToolkitScriptManager>
<%--<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>--%>
<asp:Button runat="server" Text="Expand All" CssClass="btn btn-default" OnClick="OnExpandAll" />
/<asp:Button runat="server" Text="Collapse All" CssClass="btn btn-default" OnClick="OnCollapseAll" />
<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> <i class="fa fa-bars"></i> 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="100" 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 " ExpandedText="HIDE "
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> <i class="fa fa-bars"></i> 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 " ExpandedText="HIDE "
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> <i class="fa fa-bars"></i> 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 " ExpandedText="HIDE "
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">
var extenders = [];
var all;
function SetClick() {
all = false;
}
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>
Code
C#
protected void OnExpandAll(object sender, EventArgs e)
{
CollapsiblePanelExtender1.ClientState = "false";
CollapsiblePanelExtender1.Collapsed = true;
CollapsiblePanelExtender1.ExpandedSize = 100;
CollapsiblePanelExtender2.ClientState = "false";
CollapsiblePanelExtender2.Collapsed = true;
CollapsiblePanelExtender2.ExpandedSize = 100;
CollapsiblePanelExtender3.ClientState = "false";
CollapsiblePanelExtender3.Collapsed = true;
CollapsiblePanelExtender3.ExpandedSize = 100;
}
protected void OnCollapseAll(object sender, EventArgs e)
{
CollapsiblePanelExtender1.Collapsed = false;
CollapsiblePanelExtender1.ClientState = "true";
CollapsiblePanelExtender1.CollapsedSize = 0;
CollapsiblePanelExtender2.Collapsed = false;
CollapsiblePanelExtender2.ClientState = "true";
CollapsiblePanelExtender2.CollapsedSize = 0;
CollapsiblePanelExtender3.Collapsed = false;
CollapsiblePanelExtender3.ClientState = "true";
CollapsiblePanelExtender3.CollapsedSize = 0;
}
VB.Net
Protected Sub OnExpandAll(ByVal sender As Object, ByVal e As EventArgs)
CollapsiblePanelExtender1.ClientState = "false"
CollapsiblePanelExtender1.Collapsed = True
CollapsiblePanelExtender1.ExpandedSize = 100
CollapsiblePanelExtender2.ClientState = "false"
CollapsiblePanelExtender2.Collapsed = True
CollapsiblePanelExtender2.ExpandedSize = 100
CollapsiblePanelExtender3.ClientState = "false"
CollapsiblePanelExtender3.Collapsed = True
CollapsiblePanelExtender3.ExpandedSize = 100
End Sub
Protected Sub OnCollapseAll(ByVal sender As Object, ByVal e As EventArgs)
CollapsiblePanelExtender1.Collapsed = False
CollapsiblePanelExtender1.ClientState = "true"
CollapsiblePanelExtender1.CollapsedSize = 0
CollapsiblePanelExtender2.Collapsed = False
CollapsiblePanelExtender2.ClientState = "true"
CollapsiblePanelExtender2.CollapsedSize = 0
CollapsiblePanelExtender3.Collapsed = False
CollapsiblePanelExtender3.ClientState = "true"
CollapsiblePanelExtender3.CollapsedSize = 0
End Sub
