Display first form content of Accordion and hide other using jQuery in ASP.Net

Question

yati

SOLVED CLOSED ACTIVE ANSWERED
User: yati
Posted: on Mar 28, 2017 01:51 AM
Forum: jQuery and jQuery Plugins
Answer: 4
Views: 5178
Sample Code: Download

Now I'am at home page. Then I want to go to the next page which contain many forms by using collapse bar. The situation is:

1. The first panel is automatically open. (mandatory)----Correct 2. When I click to the second panel, then it's open and the first panel is closed.----Correct 3. When I try to submit a form through the second panel, then the panel is close and the first panel is open.----Wrong * supposedly, the second panel will not be close/collapse or go to other other panel before we click onto it. So, how to modify the code?

 $(function () {
        $("#dvAccordian").accordion();
    });

    <div id="dvAccordian">
    <div class="HeaderContent">&nbsp; &nbsp; &nbsp; STUDENT INFORMATION - STUDENT DETAILS</div>
    <div>
        <asp:Panel width="100%" ID="PanelStudentDetailsAdd" runat="server" >
        <table width="95%"  align="center"  border="0" cellspacing="3" cellpadding="3">
           <tr> 
             <td >
                    <tr>
                        <td class="bar" align="center">
                            <b>PERSONAL DETAILS</b>
                        </td>
                    </tr> 

                    <asp:SqlDataSource ID="sqlDataSourceMaritalStatus" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM MaritalStatus ORDER BY MaritalStatus ASC"></asp:SqlDataSource>    
                    <asp:SqlDataSource ID="sqlDataSourceEthnicity" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM Ethnicity ORDER BY Ethnicity ASC"></asp:SqlDataSource>
                    <asp:SqlDataSource ID="sqlDataSourceReligion" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM Religion ORDER BY Religion ASC"></asp:SqlDataSource>    
                    <asp:SqlDataSource ID="sqlDataSourcestdYear" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM Year ORDER BY Year ASC"></asp:SqlDataSource> 

                       <tr><td align="center"><asp:Label id="lblmsg" runat="server" ForeColor="Red"  Display="Dynamic"/> 
                        <asp:CustomValidator ID="cvAddStudent" ErrorMessage="" SetFocusOnError="true" runat="server" Display="Dynamic" OnServerValidate="cvAddStudent_ServerValidate" ValidationGroup="ValidateClick" Font-Italic="True" ForeColor="Red"></asp:CustomValidator>
                           
                        <br />
                       </td></tr>
                     <tr>
                     <td align="center">     
                     <br />          
                            <table width="95%"  border="0" cellpadding="2" cellspacing="2">
                                <tr valign="top" >
                                    <td width="16%">Full Name</td>
                                    <td width="28%"><asp:TextBox ID="txtstdName" runat="server" Width="220px" />
                                    <asp:Label ID="Label14" runat="server" Font-Strikeout="False" ForeColor="Red" Text=" * "></asp:Label></td>
                                     
                                    <td width="16%">Gender </td>
                                     <td width="27%"><asp:DropDownList ID="ddlstdGender" runat="server" Width="220px"  Height="23" DataTextField="Gender">
                                            <asp:ListItem Value="0">SELECT</asp:ListItem>
                                            <asp:ListItem Value="Male"></asp:ListItem>
                                            <asp:ListItem Value="Female"></asp:ListItem>                          
                                        </asp:DropDownList>
                                     </td>                                      
                                </tr>
                                <tr valign="top">
                                    <td>IC No</td>
                                    <td><asp:TextBox ID="txtstdIcNo" runat="server" MaxLength="14" Width="220px"></asp:TextBox>
                                        <asp:Label ID="Label1" runat="server" Font-Strikeout="False" ForeColor="Red" Text=" * "></asp:Label>
                                        <br /><asp:RegularExpressionValidator ID="empic" runat="server" ControlToValidate="txtstdIcNo" ErrorMessage="Enter valid IC No with Dash(-)" ValidationExpression="^\d{6}-\d{2}-\d{4}$" ForeColor="Red" Display="Dynamic" ValidationGroup="ValidateClick" />
                                    </td>

                                     <td>Ethnicity </td>
                                      <td><asp:DropDownList ID="ddlstdEthnic" DataSourceID="sqlDataSourceEthnicity" DataTextField="Ethnicity" DataValueField="EthnicityID" AppendDataBoundItems="true" runat="server" Font-Strikeout="False" Height="23" Width="220px">
                                          <asp:ListItem Value="">SELECT</asp:ListItem>
                                          </asp:DropDownList>
                                     </td> 
                                </tr>
                                                            
                                <tr valign="top">
                                    <td>D.O.B</td>
                                    <td><asp:TextBox ID="txtstdDOB" runat="server" MaxLength="14" Width="220px"/>
                                    </td>

                                    <td>Age</td>
                                    <td><asp:TextBox ID="txtstdAgee" runat="server" Width="220px"/>
                                        <br /><asp:RegularExpressionValidator ID="evPAgee" runat="server" ControlToValidate="txtstdAgee" ErrorMessage="Invalid age" ValidationExpression="[0-9]{1,}" ForeColor="Red" Display="Dynamic" ValidationGroup="ValidateClick" />
                                    </td>
                                </tr>

                                <tr valign="top">
                                     <td>Parent marital Status </td>
                                     <td><asp:DropDownList ID="ddlstdMaritalStatus" DataSourceID="sqlDataSourceMaritalStatus" DataTextField="MaritalStatus" DataValueField="MaritalStatusID" AppendDataBoundItems="true" runat="server" Font-Strikeout="False" Height="23" Width="220px">
                                        <asp:ListItem Value="0">SELECT</asp:ListItem>
                                        </asp:DropDownList>                           
                                     </td>
                                    
                                    <td>Number of Sibling</td>
                                    <td><asp:TextBox ID="txtstdNoSib" runat="server" Width="220px"/>
                                        <br /><asp:RegularExpressionValidator ID="evnosibling" runat="server" ControlToValidate="txtstdNoSib" ErrorMessage="Invalid number of sibling" ValidationExpression="[0-9]{1,}" ForeColor="Red" Display="Dynamic" ValidationGroup="ValidateClick" />
                                    </td>
                                </tr> 
                                  
                                <tr valign="top">
                                    <td>Religion</td>
                                     <td colspan ="3"><asp:DropDownList ID="ddlstdReligion" DataSourceID="sqlDataSourceReligion" DataTextField="Religion" DataValueField="ReligionID" AppendDataBoundItems="true" runat="server" Font-Strikeout="False" Height="23" Width="220px">
                                          <asp:ListItem Value="">SELECT</asp:ListItem>
                                          </asp:DropDownList>
                                     </td>
                                </tr>
                            </table>
                           <br />
                        </td>
                     </tr> 
                                
                    <tr>
                        <td class="bar" align="center">
                            <b>CONTACT INFORMATION</b>
                        </td>
                    </tr> 
                 <tr>
                     <td align="center">     
                            <br />          
                            <table width="95%"  border="0" cellpadding="2" cellspacing="2">
                                <tr valign="top">
                                    <td width="16%">Current Address </td>
                                    <td colspan="3"><asp:TextBox ID="txtstdCurAdd" runat="server" Width="96%" TextMode="MultiLine"/></td>
                                </tr>

                                <tr valign="top">
                                    <td>Correspondence Address </td>
                                    <td colspan="3"><asp:TextBox ID="txtstdCorAdd" runat="server" Width="96%" TextMode="MultiLine" /></td> 
                                </tr>

                                <tr valign="top">
                                    <td width="16%">Mobile No </td>
                                    <td width="28%"><asp:TextBox ID="txtstdMobile" runat="server" Width="220px" /></td>
                                     
                                    <td width="16%">Residence No</td>
                                    <td width="27%"><asp:TextBox ID="txtstdResidence" runat="server" Width="220px" /></td>
                                </tr>

                                <tr valign="top">
                                    <td width="16%">Email </td>
                                    <td colspan="3"><asp:TextBox ID="txtstdEmail" runat="server"  Width="220px"/>
                                        <br /><asp:RegularExpressionValidator ID="apemailExp" runat="server"  controltovalidate="txtstdEmail" errormessage="Invalid email address" ForeColor="Red" Display="Dynamic" validationexpression="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$"  ValidationGroup="ValidateClick"></asp:RegularExpressionValidator>
                                    </td> 
                                </tr>
                            </table>
                            <br />
                        </td>
                     </tr>
                     <tr>
                        <td class="bar" align="center">
                            <b>STUDENT DETAILS</b>
                        </td>
                    </tr>
             
                 <asp:SqlDataSource ID="sqlDataSourcestdScholarship" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM Scholarship ORDER BY Scholarship ASC"></asp:SqlDataSource>    
                 <asp:SqlDataSource ID="sqlDataSourcestdInstitution" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM Institution ORDER BY Institution ASC"></asp:SqlDataSource>    
                 <asp:SqlDataSource ID="sqlDataSourceStdStudyField" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM StudyField ORDER BY StudyField ASC"></asp:SqlDataSource>
                 <asp:SqlDataSource ID="sqlDataSourcestdCourse" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM Course ORDER BY CourseDescription ASC"></asp:SqlDataSource>
                 <asp:SqlDataSource ID="sqlDataSourcestdCountry" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM Country ORDER BY Country ASC"></asp:SqlDataSource> 
                 <asp:SqlDataSource ID="sqlDataSourcestdUserStatus" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM UserStatus ORDER BY UserStatus ASC"></asp:SqlDataSource>    
                 <asp:SqlDataSource ID="SqlDataSourceBatch" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM Batch ORDER BY Batch ASC"></asp:SqlDataSource>
                 <asp:SqlDataSource ID="SqlDataSourceIntake" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" ></asp:SqlDataSource>

                   <tr>
                     <td align="center">     
                            <br />          
                            <table width="95%"  border="0" cellpadding="2" cellspacing="2">
                                <tr valign="top">
                                    <td width="16%">Scholarship</td> 
                                    <td width="28%"><asp:DropDownList ID="ddlstdScholarship" DataSourceID="sqlDataSourcestdScholarship" DataTextField="Scholarship" DataValueField="ScholarshipID" AppendDataBoundItems="true" runat="server" Font-Strikeout="False" Height="23" Width="220px">
                                       <asp:ListItem Value="">SELECT</asp:ListItem>
                                       </asp:DropDownList>
                                        <asp:Label ID="lblscholar" runat="server" Font-Strikeout="False" ForeColor="Red" Text=" * "></asp:Label>
                                    </td>                      
                                     
                                    <td width="16%">Batch</td>
                                    <td width="27%"><asp:DropDownList ID="ddlstdBatch" runat="server" DataSourceID="SqlDataSourceBatch" DataTextField="Batch" DataValueField="BatchID" AppendDataBoundItems="true" AutoPostBack="true" OnSelectedIndexChanged="Batch_SelectedIndexChanged" Height="23px" Width="220px">
                                        <asp:ListItem Text="SELECT" value=""></asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:Label ID="Label10" runat="server" Font-Strikeout="False" ForeColor="Red" Text=" * "></asp:Label>
                                    </td>
                                  </tr>
                      
                                <tr valign="top">
                                    <td>Institution</td> 
                                    <td><asp:DropDownList ID="ddlstdInstitution" DataSourceID="sqlDataSourcestdInstitution" DataTextField="Institution" DataValueField="InstitutionID" AppendDataBoundItems="true" runat="server" Font-Strikeout="False" Height="23" Width="220px">
                                        <asp:ListItem Value="">SELECT</asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:Label ID="Label4" runat="server" Font-Strikeout="False" ForeColor="Red" Text=" * "></asp:Label>
                                    </td>                      
                                     
                                    <td>Intake</td>
                                    <td><asp:DropDownList ID="ddlstdIntake" runat="server" DataSourceID="SqlDataSourceIntake" DataTextField="Intake" DataValueField="IntakeID" AppendDataBoundItems="true" Height="23" Width="220px">
                                        <asp:ListItem Text="SELECT" value=""></asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:Label ID="Label37" runat="server" Font-Strikeout="False" ForeColor="Red" Text=" * "></asp:Label>
                                    </td>                                      
                                </tr>

                                <tr valign="top">
                                    <td>Field of Study</td>
                                    <td><asp:DropDownList ID="ddlstdStudyField" DataSourceID="sqlDataSourceStdStudyField" DataTextField="StudyField" DataValueField="StudyFieldID" AppendDataBoundItems="true" runat="server" Font-Strikeout="False" Height="23" Width="220px">
                                       <asp:ListItem Value="">SELECT</asp:ListItem>
                                       </asp:DropDownList>
                                        <asp:Label ID="Label5" runat="server" Font-Strikeout="False" ForeColor="Red" Text=" * "></asp:Label>
                                    </td>                     
                                     
                                     <td>Fly Date </td>
                                     <td><asp:TextBox ID="txtstdFly" runat="server" Width="220px"  Height="23" />
                                     </td>                                      
                                </tr>

                                <tr valign="top">
                                    <td>Course</td>
                                    <td><asp:DropDownList ID="ddlstdCourse" DataSourceID="sqlDataSourcestdCourse" DataTextField="CourseDescription" DataValueField="CourseID" AppendDataBoundItems="true" runat="server" Font-Strikeout="False" Height="23" Width="220px">
                                       <asp:ListItem Value="">SELECT</asp:ListItem>
                                       </asp:DropDownList>
                                        <asp:Label ID="Label6" runat="server" Font-Strikeout="False" ForeColor="Red" Text=" * "></asp:Label>
                                    </td>                     
                                     
                                     <td>Graduate Year</td>
                                     <td><asp:DropDownList ID="ddlstdYear" DataSourceID="sqlDataSourcestdYear" DataTextField="Year" DataValueField="YearID" AppendDataBoundItems="true" runat="server" Font-Strikeout="False" Height="23" Width="220px">
                                         <asp:ListItem Value="">SELECT</asp:ListItem>
                                         </asp:DropDownList>
                                         <asp:Label ID="Label2" runat="server" Font-Strikeout="False" ForeColor="Red" Text=" * "></asp:Label>
                                     </td>
                                </tr>
                                
                                
                             <tr>
                                 <td>Country</td>
                                 <td><asp:DropDownList ID="ddlstdCountry" DataSourceID="sqlDataSourcestdCountry" DataTextField="Country" DataValueField="CountryID" AppendDataBoundItems="true" runat="server" Font-Strikeout="False" Height="23" Width="220px">
                                 <asp:ListItem Value="">SELECT</asp:ListItem>
                                 </asp:DropDownList>
                                 </td>

                                 <td>Status</td>
                                    <td><asp:DropDownList ID="ddlstdUserStatus" DataSourceID="sqlDataSourcestdUserStatus" DataTextField="UserStatus" DataValueField="UserStatusID" AppendDataBoundItems="true" runat="server" Font-Strikeout="False" Height="23" Width="220px">
                                        <asp:ListItem Value="">SELECT</asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:Label ID="Label8" runat="server" Font-Strikeout="False" ForeColor="Red" Text=" * "></asp:Label>
                                    </td>  
                             </tr>     
                            </table>
                          <br />
                    </td>
               </tr>
             
                    <tr>
                        <td class="bar" align="center">
                            <b>OTHERS</b>
                        </td>
                    </tr> 

                    <tr>
                     <td align="center">     
                            <br />          
                            <table width="95%"  border="0" cellpadding="2" cellspacing="2">

                                <tr valign="Top">
                                    <td width="18%">Photo</td>
                                    <td colspan="3"><asp:FileUpload ID="imgUpload" runat="server" Width="410px" /></td>
                                </tr>
                                
                                <tr valign="Top">
                                    <td width="18%">Remarks</td>
                                    <td colspan="3"><asp:TextBox ID="txtstdRemarks" runat="server" Height="60px" Width="410px" TextMode="MultiLine" /></td>
                                </tr> 

                                <tr><td>&nbsp</td>
                                    <td><span><em>(Scholarship Agreement, Health Report)</span></em></td>
                                </tr>

                                <tr valign="top">
                                    <td>File 1</td>
                                    <td><asp:FileUpload ID="upAttachment1" runat="server" Width="410px" /></td>
                                </tr>

                                <tr valign="top">
                                    <td>File 2</td>
                                    <td><asp:FileUpload ID="upAttachment2" runat="server" Width="410px" /><br /></td>
                                </tr>

                                <tr valign="top">
                                    <td>File 3</td>
                                    <td><asp:FileUpload ID="upAttachment3" runat="server" Width="410px" /></td>
                                </tr>

                                <tr valign="top">
                                    <td>File 4</td>
                                    <td><asp:FileUpload ID="upAttachment4" runat="server" Width="410px" /><br /></td>
                                </tr>
                                
                               <tr>
                                    <td colspan="2" align="center">
                                        <br />
                                        <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSaveStudent_Click"  ValidationGroup="ValidateClick" OnClientClick="return Validate()" />&nbsp;&nbsp;
                                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click"  />
                                        <br /><br />
                                    </td>
                                </tr>

                              </table>
                            <br />
                        </td>
                     </tr>            
                </table>
            </asp:Panel> 
        </div>
        
     
<!--/////////////////////////////////////////////////////////////////////////--FAMILY PARTICULARS--/////////////////////////////////////////////////////////////////////-->
     
       <div class="HeaderContent">&nbsp; &nbsp; &nbsp; STUDENT INFORMATION - FAMILY PARTICULARS</div>
        <div>
                 
            <table width="95%"  border="0" cellpadding="2" cellspacing="2">
            <tr>
                     <td align="center">     
                            <br />          
                            <table width="95%"  border="0" cellpadding="2" cellspacing="2">
                                <tr valign="top">
                                    <td width="16%">Current Address </td>
                                    <td colspan="3"><asp:TextBox ID="TextBox1" runat="server" Width="96%" TextMode="MultiLine"/></td>
                                </tr>

                                <tr valign="top">
                                    <td>Correspondence Address </td>
                                    <td colspan="3"><asp:TextBox ID="TextBox2" runat="server" Width="96%" TextMode="MultiLine" /></td> 
                                </tr>

                                <tr valign="top">
                                    <td width="16%">Mobile No </td>
                                    <td width="28%"><asp:TextBox ID="TextBox3" runat="server" Width="220px" /></td>
                                     
                                    <td width="16%">Residence No</td>
                                    <td width="27%"><asp:TextBox ID="TextBox4" runat="server" Width="220px" /></td>
                                </tr>

                                <tr valign="top">
                                    <td width="16%">Email </td>
                                    <td colspan="3"><asp:TextBox ID="TextBox5" runat="server"  Width="220px"/>
                                        <br /><asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"  controltovalidate="txtstdEmail" errormessage="Invalid email address" ForeColor="Red" Display="Dynamic" validationexpression="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$"  ValidationGroup="ValidateClick"></asp:RegularExpressionValidator>
                                    </td> 
                                </tr>
                            </table>
                            <br />
                        </td>
                     </tr>

                               <tr>
                                    <td colspan="2" align="center">
                                        <br />
                                        <asp:Button ID="Button1" runat="server" Text="Save" OnClick="btnSaveStudent_Click"  ValidationGroup="ValidateClick" OnClientClick="return Validate()" />&nbsp;&nbsp;
                                        <asp:Button ID="Button2" runat="server" Text="Cancel" OnClick="btnCancel_Click"  />
                                        <br /><br />
                                    </td>
                                </tr>


            </table>

        </div>
           
<!--/////////////////////////////////////////////////////////////////////////--SURETIES--/////////////////////////////////////////////////////////////////////-->

        <div class="HeaderContent">&nbsp; &nbsp; &nbsp; STUDENT INFORMATION - SURETIES</div>
        <div>
        </div>

<!--/////////////////////////////////////////////////////////////////////////--ACADEMIC--/////////////////////////////////////////////////////////////////////-->

        <div class="HeaderContent">&nbsp; &nbsp; &nbsp; STUDENT INFORMATION - ACADEMIC</div>
        <div>
        </div>

<!--/////////////////////////////////////////////////////////////////////////--PROFESSIONAL BODY--/////////////////////////////////////////////////////////////////////-->

        <div class="HeaderContent">&nbsp; &nbsp; &nbsp; STUDENT INFORMATION - PROFESSIONAL BODY</div>
         <div>
        </div>

<!--/////////////////////////////////////////////////////////////////////////--ACTIVITIES--/////////////////////////////////////////////////////////////////////-->

        <div class="HeaderContent">&nbsp; &nbsp; &nbsp; STUDENT INFORMATION - ACTIVITIES</div> 
         <div>
        </div>

<!--/////////////////////////////////////////////////////////////////////////--CAREER PROGRESS--/////////////////////////////////////////////////////////////////////-->

        <div class="HeaderContent">&nbsp; &nbsp; &nbsp; STUDENT INFORMATION - CAREER PROGRESS</div>
        <div>
        </div>
        
 </div>

Display first form content of Accordion and hide other using jQuery in ASP.Net

GridView CRUD: Select Insert Edit Update Delete using Single Stored Procedure in ASP.Net

Getting ID of the newly inserted record in SQL Server Database using ADO.Net

Return Identity value from Stored Procedure in SQL Server

Company

Explore

Follow us

Contact Us