Hi rakeshkuma,
Add the active class to the panel on click inside the SetClick function. Refer below code.
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<style type="text/css">
.active {
color: white !important;
background-color: aquamarine !important;
font-size: 12px !important;
cursor: pointer !important;
width: 100% !important;
height: 25px !important;
padding: 4px !important;
border: 1px solid #949494 !important;
}
.cpHeader {
color: white;
background-color: #E17E26;
font-size: 12px;
cursor: pointer;
width: 100%;
height: 25px;
padding: 4px;
border: 1px solid #949494;
}
.cpHeaderdis {
color: white;
background-color: #949494;
font-size: 12px;
cursor: pointer;
width: 100%;
height: 25px;
padding: 4px;
border: 1px solid #949494;
}
.cpBody {
background-color: #ffffff;
border: 1px gray;
width: 100%;
padding: 4px;
padding-top: 7px;
border: 1px solid #949494;
}
</style>
<section class="container-fluid title-overlay" style="background-color: #949494;">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h3 style="margin-top: 7px; margin-bottom: 7px;">Create Purchase Order
<br />
<a href="javascript:history.go(-1)" class="" style="font-size: 9px; letter-spacing: 1px; vertical-align: middle; color: #ffffff"><i class="fa fa-chevron-left"></i> BACK</a>
</h3>
</div>
</div>
</div>
</section>
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<section class="container-fluid block location-block">
<div class="container">
<div class="row">
<div class="card card-body">
<div class="row">
<div class="col-sm-12" style="margin-top: 10px;">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Panel ID="pnl1header" runat="server" CssClass="cpHeader" onclick="SetClick(this)">
<div class="col-sm-11"> <i class="fa fa-bars"></i> SECTION 1 </div>
<div class="col-sm-1" style="float: right; text-align: right;">
<asp:Image ID="img1" runat="server" Style="margin-top: -3px;" />
</div>
</asp:Panel>
<asp:Panel ID="pnl1" runat="server" CssClass="cpBody">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label class="lblstyle" style="padding-left: 0px; margin-top: 4px">Order No </label>
<asp:TextBox runat="server" autofocus="true" ID="txtorno" onkeypress="return isNumberKey(event);" Style="margin-top: 0px;" MaxLength="6" CssClass="form-control" />
<asp:RegularExpressionValidator ID="regComments" runat="server" ControlToValidate="txtorno" ValidationExpression="^[\s\S]{0,6}$" ForeColor="#ff3636" Display="Dynamic" Font-Size="11px" Style="letter-spacing: 1px" Text="8 chrs max"> <i class="fa fa-exclamation-triangle"></i> Maximum 6 number are allowed. </asp:RegularExpressionValidator>
<ajax:FilteredTextBoxExtender ID="fxtxtorno" runat="server" FilterType="Numbers" TargetControlID="txtorno" />
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="lblstyle" style="padding-left: 0px;">Creation Date <span style="color: #ff3636; font-size: 14px">*</span> </label>
<asp:TextBox runat="server" ID="txtt_odat" CssClass="form-control" Style="background-color: white" AutoCompleteType="None" autocomplete="none" />
<asp:RequiredFieldValidator runat="server" ID="rf_txtt_odat" Display="Dynamic" SetFocusOnError="true" ControlToValidate="txtt_odat" ValidationGroup="AccordionPane1" ForeColor="#ff3636" Font-Size="11px" Style="letter-spacing: 1px"><i class="fa fa-exclamation-triangle"></i> Required!</asp:RequiredFieldValidator>
<ajax:CalendarExtender ID="cltxtt_odat" runat="server" Enabled="True" Format="dd-MM-yyyy" TargetControlID="txtt_odat" CssClass="cltxtddta"></ajax:CalendarExtender>
</div>
</div>
</div>
<hr />
<%--<asp:GridView ID="gv_poitem" runat="server" AutoGenerateColumns="false" Style="width: auto" DataKeyNames="item" CssClass="table table-bordered table-striped">
<Columns>
<asp:TemplateField HeaderText="#">
<ItemTemplate><%# Container.DataItemIndex + 1 %></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server" AutoPostBack="true" OnCheckedChanged="OnCheckedChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkDel" runat="server" AutoPostBack="true" OnCheckedChanged="OnCheckedChanged" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Item Code">
<ItemTemplate>
<asp:Label runat="server" ID="lblitem" Text='<%# Eval("item") %>'></asp:Label>
<asp:TextBox ID="gw_txtitem" AutoFocus="true" AutoPostBack="true" autocomplete="none" OnTextChanged="gw_txtitem_TextChanged" CssClass="form-control" runat="server" Text='<%# Eval("item") %>' Visible="false"></asp:TextBox>
<ajax:AutoCompleteExtender ID="AutoCompleteExtender4" runat="server" FirstRowSelected="true" TargetControlID="gw_txtitem" MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="20" ServiceMethod="GetItem"></ajax:AutoCompleteExtender>
</ContentTemplate>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Item Name">
<ItemTemplate>
<asp:Label runat="server" ID="lbldsca" Text='<%# Eval("dsca") %>'></asp:Label>
<asp:TextBox ID="gv_txtdsca" CssClass="form-control" runat="server" Text='<%# Eval("dsca") %>' Visible="false"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Spec" HeaderStyle-Width="20px">
<ItemTemplate>
<asp:Label ID="gv_lbldet_text" runat="server" CssClass="viscol" Text='<%# Eval("det_text") %>'></asp:Label>
<asp:TextBox ID="gv_txtdet_text" Style="white-space: nowrap; min-width: 20px;" CssClass="form-control viscol" runat="server" Text='<%# Eval("det_text") %>' Visible="false"></asp:TextBox>
<asp:LinkButton ID="gv_btnSpecView" runat="server" CssClass="" ForeColor="#E17E26" Font-Size="14px" OnClick="gv_btnSpecView_Click" CommandArgument="<%# Container.DataItemIndex %>"> View </asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>--%>
<asp:Panel ID="pnlAddUpdateitemDetails" runat="server" CssClass="modalPopup" Style="display: none;">
<div style="overflow-y: auto; overflow-x: hidden; max-height: 800px; min-width: 600px">
<div class="modal-header">
<asp:Label ID="lblitemspecview" runat="server" CssClass="modal-title"></asp:Label>
</div>
<div class="modal-body">
<div class="row">
<asp:TextBox ID="txtitemspecview" ReadOnly="true" runat="server" TextMode="MultiLine" Columns="10" Rows="5" CssClass="form-control" Text="test"></asp:TextBox>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-12">
<asp:Button ID="btnCancel" runat="server" Text="CLOSE" CssClass="btn btn-primary" />
</div>
</div>
</div>
</div>
</asp:Panel>
<ajax:ModalPopupExtender ID="mpeAddUpdateitem" runat="server" PopupControlID="pnlAddUpdateitemDetails"
TargetControlID="lnkFake" BehaviorID="mpeAddUpdateitem" CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
<asp:Button ID="btn1" runat="server" CssClass="btn btn-primary btn-xs" Text="SAVE / NEXT" ValidationGroup="AccordionPane1" />
</asp:Panel>
<ajax:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pnl1" CollapseControlID="pnl1header" ExpandControlID="pnl1header"
Collapsed="true" AutoExpand="true" CollapsedImage="plus.png" ImageControlID="img1" ExpandedImage="minus.png" CollapsedSize="0"></ajax:CollapsiblePanelExtender>
<asp:Panel ID="section2" runat="server" Style="padding-top: 5px;">
<asp:Panel ID="pnl2header" runat="server" CssClass="cpHeader" onclick="SetClick(this)">
<div class="col-sm-11"> <i class="fa fa-bars"></i> SECTION 2 </div>
<div class="col-sm-1" style="float: right; text-align: right;">
<asp:Image ID="img2" runat="server" Style="margin-top: -3px;" />
</div>
</asp:Panel>
<asp:Panel ID="pnl2" runat="server" CssClass="cpBody">
<table class="table table-bordered table-striped">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
</table>
<asp:Button runat="server" ID="btn2" Text="SAVE / NEXT" CssClass="btn btn-primary btn-xs" />
</asp:Panel>
<ajax:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" TargetControlID="pnl2" CollapseControlID="pnl2header" ExpandControlID="pnl2header"
Collapsed="true" CollapsedSize="0" CollapsedImage="plus.png" ImageControlID="img2" ExpandedImage="minus.png"></ajax:CollapsiblePanelExtender>
</asp:Panel>
</ContentTemplate>
<Triggers>
<%--<asp:AsyncPostBackTrigger ControlID="gv_poitem" />--%>
</Triggers>
</asp:UpdatePanel>
<asp:Label ID="lblmsg" runat="server"></asp:Label>
</div>
</div>
</div>
</div>
</div>
</section>
</form>
<script type="text/javascript">
var extenders = [];
var all;
function SetClick(ele) {
var panels = document.getElementsByClassName('cpHeader');
for (var i = 0; i < panels.length; i++) {
panels[i].classList.remove('active');
}
ele.classList.add("active")
all = false;
}
function pageLoad(sender, args) {
all = false;
extenders[0] = $find("<%= CollapsiblePanelExtender1.ClientID %>");
extenders[1] = $find("<%= CollapsiblePanelExtender2.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
