Expand collapsible panel if control fails validation using jQuery in ASP.Net

Hi rakeshkuma,

Refer below 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>
            <div class="row">
                <div class="card card-body">
                    <div class="row">
                        <asp:Panel ID="pnlMouseClick" runat="server" CssClass="pnlCSS">
                            <div style="height: 35px; vertical-align: middle" class="Headercss">
                                <div style="float: left;">
                                    <h4>&nbsp;&nbsp;   <i class="fa fa-bars"></i>&nbsp;  ORDER DETAILS    </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-sm-2">
                                <div class="form-group">
                                    <label class="lblstyle" style="padding-left: 0px;">Order No  </label>
                                    <asp:TextBox runat="server" autofocus="true" ID="txtorno" onkeypress="return isNumberKey(event);" Style="color: #E17E26; font-weight: bold" MaxLength="6" CssClass="form-control" />
                                    <asp:HiddenField ID="hfOrderStatus" runat="server" Value="Collapsed" />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group" style="height: 300px !important;">
                                    <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" onkeydown="return false;" Style="background-color: white" AutoCompleteType="None" autocomplete="none" />
                                    <asp:RequiredFieldValidator runat="server" ID="rf_txtt_odat" SetFocusOnError="true" ControlToValidate="txtt_odat" ValidationGroup="headerdl" ForeColor="#ff3636" Font-Size="11px" Style="letter-spacing: 1px"><i class="fa fa-exclamation-triangle"></i>&nbsp; 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>
                        </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">
                            <div style="height: 35px; vertical-align: middle" class="Headercss">
                                <div style="float: left;">
                                    <h4>&nbsp;&nbsp;   <i class="fa fa-bars"></i>&nbsp;  SUPPLIER DETAILS    </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="SCPanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                                <ContentTemplate>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label class="lblstyle">Supplier Code  <span style="color: #ff3636; font-size: 12px">*</span> </label>
                                            <asp:TextBox ID="txtsuno" runat="server" MaxLength="6" AutoCompleteType="None" autocomplete="none" CssClass="form-control"></asp:TextBox>
                                            <asp:RequiredFieldValidator runat="server" ID="rf_txtsuno" SetFocusOnError="true" Display="Dynamic" ControlToValidate="txtsuno" ValidationGroup="headerdl" ForeColor="#ff3636" Font-Size="11px" Style="letter-spacing: 1px"><i class="fa fa-exclamation-triangle"></i>&nbsp; Required!</asp:RequiredFieldValidator>
                                            <asp:HiddenField ID="hfSupplierStatus" runat="server" Value="Collapsed" />
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label class="lblstyle">Supplier Name  </label>
                                            <asp:TextBox runat="server" ID="txtnama" ReadOnly="true" CssClass="form-control" />
                                        </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="lblMessage2" ImageControlID="Image2" CollapsedImage="~/assets/plus.png"
                            ExpandedImage="~/assets/minus.png" ExpandDirection="Vertical" TargetControlID="pnlCollapsable2" ScrollContents="false">
                        </ajax:CollapsiblePanelExtender>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="lblstyle">&nbsp; </label>
                                <asp:Button ID="btnaddpolineitem" runat="server" Text="SUBMIT" ValidationGroup="headerdl" CssClass="btn btn-primary btn-xs" Style="letter-spacing: 1px" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</form>
<script type="text/javascript">
    $(function () {
        $('body').on('click', '[id*=btnaddpolineitem]', function () {
            var isValid = true;
            if ($("[id*=txtt_odat]").val() == '') {
                var hid = $("[id*=txtt_odat]").closest('[class="row"]').find($("[id*=hfOrderStatus]"));
                if ($(hid).val() == 'Collapsed') {
                    $('[id*=imgArrows]').trigger('click');
                    $(hid).val("Expanded");
                    isValid = false;
                }
            } else {
                var hid = $("[id*=txtt_odat]").closest('[class="row"]').find($("[id*=hfOrderStatus]"));
                if ($(hid).val() == 'Expanded') {
                    $('[id*=imgArrows]').trigger('click');
                    $(hid).val("Collapsed");
                    isValid = true;
                }
            }

            if ($("[id*=txtsuno]").val() == '') {
                var hid1 = $("[id*=txtsuno]").closest('[class="row"]').find($("[id*=hfSupplierStatus]"));
                if ($(hid1).val() == 'Collapsed') {
                    $('[id*=Image2]').trigger('click');
                    $(hid1).val("Expanded");
                    isValid = false;
                }
            } else {
                var hid1 = $("[id*=txtsuno]").closest('[class="row"]').find($("[id*=hfSupplierStatus]"));
                if ($(hid1).val() == 'Collapsed') {
                    $('[id*=Image2]').trigger('click');
                    $(hid1).val("Expanded");
                    isValid = true;
                }
            }

            if (!isValid) {
                return false;
            }
        });
    });
</script>