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> <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="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 " 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">
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
![](https://i.imgur.com/VnUF93L.gif)