Hi AnandM, thanks for the code.
It's working and really appreciate it...I have another question. I have 7 panels as my code before.
Kindly refer below code:
<div id="dvAccordian">
<div class="HeaderContent"> PANEL 1</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> </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()" />
<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"> PANEL 2</div>
<div>
</div>
<!--/////////////////////////////////////////////////////////////////////////--SURETIES--/////////////////////////////////////////////////////////////////////-->
<div class="HeaderContent"> PANEL 3</div>
<div>
</div>
<!--/////////////////////////////////////////////////////////////////////////--ACADEMIC--/////////////////////////////////////////////////////////////////////-->
<div class="HeaderContent"> PANEL 4</div>
<div>
</div>
<!--/////////////////////////////////////////////////////////////////////////--PROFESSIONAL BODY--/////////////////////////////////////////////////////////////////////-->
<div class="HeaderContent"> PANEL 5</div>
<div>
</div>
<!--/////////////////////////////////////////////////////////////////////////--ACTIVITIES--/////////////////////////////////////////////////////////////////////-->
<div class="HeaderContent"> PANEL 6</div>
<div>
</div>
<!--/////////////////////////////////////////////////////////////////////////--CAREER PROGRESS--/////////////////////////////////////////////////////////////////////-->
<div class="HeaderContent"> PANEL 7</div>
<div>
</div>
</div>
As I know, PANEL 1 is the default panel which is automatically open as the first time
if we go to the page...(Correct)
My situation is, I dont want other panel collapse except panel 1
if user click to the panel because there has no form inside it. The reason I'm creating like that because
the user must complete the form in the first panel before he can click to other panel
which is another page. Once he complete and save the first form in PANEL 1 then he will
redirect to another page which contain more forms in each panels. PANEL 1 is the mandatory
form to complete. On the other word, how to hide the body in PANEL 2 until PANEL 7 to not
collapse and just only show the header.Kindly help me.TQVM
