Keep Bootstrap Accordion Tab Active after PostBack in ASP.Net

Last Reply 6 months ago By dharmendr

Posted 6 months ago

how can I get active tab back after Postback Event for Coallapsible tab i.e. Accordion

                <div id="accordion" class="panel-group" style="font-size: large; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">
                    <div class="panel panel-red">
                        <div class="panel-heading">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="display: block; color: white; font-weight: bold; text-decoration: underline">#Sponsor Details **</a>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div class="row" style="text-align: center">
                                    <div class="col-md-4">
                                        <asp:Label ForeColor="Black" ID="Label14" runat="server" Text="Sponsor A/c No."></asp:Label><br />
                                        <div class="input-icon">
                                            <i class="fa fa-user-plus"></i>
                                            <asp:TextBox ID="txtSpAcno" AutoPostBack="true" MaxLength="10" ForeColor="#BF4346" Font-Bold="true" Font-Size="Medium" runat="server" CssClass="form-control" OnTextChanged="txtSpAcno_TextChanged"></asp:TextBox>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <asp:Label ForeColor="Black" ID="Label16" runat="server" Text="Sponsor BC No."></asp:Label><br />
                                        <asp:TextBox ID="txtSPBCno" ReadOnly="true" ForeColor="#BF4346" Font-Bold="true" Font-Size="Medium" runat="server" CssClass="form-control"></asp:TextBox>
                                    </div>
                                    <div class="col-md-4">
                                        <asp:Label ForeColor="Black" ID="Label15" runat="server" Text="Sponsor Name"></asp:Label><br />
                                        <div class="input-icon">
                                            <i class="fa fa-user"></i>
                                            <asp:TextBox ID="txtSPName" ReadOnly="true" ForeColor="#BF4346" Font-Bold="true" Font-Size="Medium" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-md-offset-4">
                                        <asp:Label ForeColor="Black" ID="Label17" runat="server" Text="Left/Right Team"></asp:Label><br />
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-angle-double-left"></i></span>
                                            <span class="input-group-addon"><i class="fa fa-angle-double-right"></i></span>
                                            <asp:DropDownList ID="drpPosition" ForeColor="#BF4346" Font-Bold="true" Font-Size="Medium" runat="server" CssClass="form-control">
                                                <asp:ListItem Value="">Select Team</asp:ListItem>
                                                <asp:ListItem Value="Left">Left Side</asp:ListItem>
                                                <asp:ListItem Value="Right">Right Side</asp:ListItem>
                                            </asp:DropDownList>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-blue">
                        <div class="panel-heading">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" style="display: block; color: white; font-weight: bold; text-decoration: underline">#Member Details **</a>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div class="row" style="text-align: center">
                                   
                                    <div class="col-md-4">
                                        <asp:Label ForeColor="Black" ID="Label2" runat="server" Text="Mobile No."></asp:Label><br />
                                        <div class="input-icon">
                                            <i class="fa fa-mobile"></i>
                                            <asp:TextBox ID="txtMobile" AutoPostBack="true" MaxLength="10" ForeColor="#2A73D4" Font-Bold="true" Font-Size="Medium" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>
                                    </div>
                                  
                                  
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="panel panel-green">
                        <div class="panel-heading">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" style="display: block; color: white; font-weight: bold; text-decoration: underline">#Account Details</a>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse">
                            <div class="panel-body">
                                

                            </div>
                        </div>
                    </div>

                    <div class="panel panel-pink">
                        <div class="panel-heading">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" style="display: block; color: white; font-weight: bold; text-decoration: underline">#Login Details (Check Terms & Conditions) **</a>
                        </div>
                        <div id="collapseFour" class="panel-collapse collapse">
                            <div class="panel-body">
                                
                            </div>
                        </div>
                    </div>

                    <br />
                    <div class="row">
                        <div class="col-md-8">
                            <h3 class="hs_heading">
                                <asp:LinkButton ID="LinkError" runat="server" Text="" Font-Bold="true"></asp:LinkButton>
                            </h3>

                        </div>
                        <div class="col-md-3" style="text-align: center">
                            <%--<button type="button" data-target="#modal-alert" data-toggle="modal" class="btn btn-blue">View Demo</button>--%>
                            <button id="btnSubmit" runat="server" onserverclick="btnSubmit_ServerClick" class="btn btn-success">Success &nbsp;<i class="fa fa-rocket"></i></button>
                        </div>
                    </div>
                </div>

 

You are viewing reply posted by: dharmendr 6 months ago.