Hi Mija,
I have created a sample which full fill your requirement you need to modify the code according to your need.
HTML
<div>
<asp:HiddenField ID="hfActiveTab" runat="server" />
<div>
<table width="95%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="dvAccordian">
<div class="HeaderContent">
FINANCIAL - STUDENT BANK ACCOUNT</div>
<div>
<asp:Panel Width="100%" ID="PanelFinancial" runat="server" Visible="true">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Student Id:-
</td>
<td>
<asp:TextBox ID="txtStudentId" runat="server" />
</td>
</tr>
<tr>
<td>
Student Name:-
</td>
<td>
<asp:TextBox ID="txtStudentName" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSave" Text="Save" data-index="0" runat="server" />
</td>
</tr>
</table>
</asp:Panel>
</div>
<div class="HeaderContent">
FINANCIAL - ALLOWANCE</div>
<div>
<asp:Panel Width="100%" ID="PanelAllowance" runat="server" Visible="true">
<table border="0" cellpadding="5">
<tr>
<td>
ALLOWANCE Student Id:-
</td>
<td>
<asp:TextBox ID="txtAllowanceId" runat="server" />
</td>
</tr>
<tr>
<td>
ALLOWANCE Student Name:-
</td>
<td>
<asp:TextBox ID="txtAllowanceName" runat="server" />
<br />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnAllowanceSave" Text="Save" data-index="1" runat="server" />
</td>
</tr>
</table>
</asp:Panel>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('[id*=btnSave]').click(function () {
if ($('[id*=txtStudentId]').val() != '' && $('[id*=txtStudentName]').val() != '') {
$('[id*=hfActiveTab]').val($('[id*=btnAllowanceSave]').data("index"));
return true;
}
else {
alert('Need to fill the data correctly');
return false;
}
});
});
window.onload = function SetActiveTab() {
if ($('[id*=hfActiveTab]').val() == '') {
$("#dvAccordian").accordion({ disabled: true });
}
if ($('[id*=hfActiveTab]').val() != '') {
$("#dvAccordian").accordion();
$("#dvAccordian").accordion("enable").accordion("activate", parseInt($('[id*=hfActiveTab]').val(), 10));
$(".ui-state-disabled").css({ 'opacity': '3' });
}
}
</script>
</div>
ScreenShot
