I have jquery table nested within Accordian but it doesnt seems to be working. Even the submit buttons are not displaying outside the accordian panel. I have tried looking into tabs view but issue still remain same. Looks like the conflict with jquery. Please help me in resolving this.Below is the code I am using.
`
`
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--This is Javascript to disable the address fields if user doesn't tick the checkbox-->
<script type="text/javascript">
$(document).ready(function(){
$('#sccb').click(function(){
if (this.checked) {
$('#cns').removeAttr("disabled");
$('#cns2').removeAttr("disabled");
$('#cns3').removeAttr("disabled");
$('#cns4').removeAttr("disabled");
$('#cns5').removeAttr("disabled");
$('#cns6').removeAttr("disabled");
$('#cns7').removeAttr("disabled");
} else {
$("#cns").attr("disabled", true);
$("#cns2").attr("disabled", true);
$("#cns3").attr("disabled", true);
$('#cns4').attr("disabled", true);
$('#cns5').attr("disabled", true);
$('#cns6').attr("disabled", true);
$('#cns7').attr("disabled", true);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#sccb1').click(function(){
if (this.checked) {
$('#cns8').removeAttr("disabled");
$('#cns9').removeAttr("disabled");
$('#cns10').removeAttr("disabled");
$('#cns11').removeAttr("disabled");
$('#cns12').removeAttr("disabled");
$('#cns13').removeAttr("disabled");
$('#cns14').removeAttr("disabled");
} else {
$("#cns8").attr("disabled", true);
$("#cns9").attr("disabled", true);
$("#cns10").attr("disabled", true);
$("#cns11").attr("disabled", true);
$("#cns12").attr("disabled", true);
$("#cns13").attr("disabled", true);
$("#cns14").attr("disabled", true);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#sccb2').click(function(){
if (this.checked) {
$('#cns15').removeAttr("disabled");
$('#cns16').removeAttr("disabled");
$('#cns17').removeAttr("disabled");
$('#cns18').removeAttr("disabled");
$('#cns19').removeAttr("disabled");
$('#cns20').removeAttr("disabled");
$('#cns21').removeAttr("disabled");
} else {
$("#cns15").attr("disabled", true);
$("#cns16").attr("disabled", true);
$("#cns17").attr("disabled", true);
$("#cns18").attr("disabled", true);
$("#cns19").attr("disabled", true);
$("#cns20").attr("disabled", true);
$("#cns21").attr("disabled", true);
}
});
});
</script>
<script>
jQuery(function($){
$( document ).ready(function() {
$( "select" ).change(function () {
var val = this.value;
if (val != 'select one') {
var tableRows = $("table tr");
jQuery.each(tableRows, function(i ,tr) {
if (i > val) {
$(tr).hide();
} else {
$(tr).show();
}
})
}
}
)
});
});
</script>
<style>
button.accordion {
background-color: #33CCFF;
color: #444;
cursor: pointer;
margin: 15px;
padding: 14px;
width: 1250px;
border: 2px;
text-align: left;
font-family: Comic Sans MS;
text-decoration: underline;
font-weight: bold;
outline: none;
font-size: 15px;
transition: 0.4s;
border:1px solid #ccc;
border-radius:5px;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\02795';
font-size: 14px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2796";
}
div.panel {
padding: 0 25px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 1500px;
}
tbody tr {
display: none;
}
</style>
</head>
<body>
<button class="accordion"><big>Guardian's Details</big></button>
<div id="foo" class="panel">
<fieldset>
<fieldset style="width: 1220px;">
<legend style="font-weight: bold; font-family: Comic Sans MS;text-decoration: underline;">Personal Details</legend>
<div style="width: 1230px;" class="form-group">
<big><label for="stugtitle">Title<span style="color: red;">*</span></label></big>
<select name="stugtitle" class="input" required>
<option value="">--select--</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
<big><label for="stugfname">Firstname<span style="color: red;">*</span></label></big>
<input size="15" name="stugfname" class="input" required>
<big><label for="stugmname">Middlename</label></big>
<input size="15" class="input" name="stugmname">
<big><label for="stugsname">Surname<span style="color: red;">*</span></label></big>
<input size="15" class="input" name="stugsname" required>
</div>
<br>
<big><label for="stuggender">Gender<span style="color: red;">*</span></label></big>
<select name="stuggender" class="input" required>
<option value="">--select--</option>
<option value="M">Male</option>
<option value="F">Female</option>
<option value="Mx">Mx</option>
</select>
<big><label for="stugdob">Birthdate<span style="color: red;">*</span></label></big>
<input size="15" name="stugdob" class="input" type="date" required>
<big><label for="stugmobile">Mobile<span style="color: red;">*</span></label></big>
<input size="15" class="input" name="stugmobile" required>
<big><label for="stugemail">Email<span style="color: red;">*</span></label></big>
<input size="19" class="input" name="stugemail" type="email" required>
</fieldset>
<br><br>
<fieldset>
<fieldset style="width: 1220px;">
<legend style="font-weight: bold; font-family: Comic Sans MS; text-decoration: underline;">Address Details</legend>
<div style="width: 1230px;" class="form-group">
<big><big><big><label for="stugaddress">Adress not same as applicant's address<span style="color: red;">*</span></label></big></big></big>
<input type="checkbox" id="sccb2" name="stugaddress" value="stugaddress">
(<span style="color: red; font-family: Comic Sans MS;"><span style="color: rgb(51, 51, 51);"></span><style="font-weight: bold;">Please tick the box to enter the details</span>)<br>
<br>
<big><label for="stugadd1">Address Line 1</label></big>
<input type="text" class="input" id="cns15" name="stugadd1" disabled="disabled"/>
<big><label for="stugadd2">Address Line 2</label></big>
<input type="text" class="input" id="cns16" name="stugadd2" disabled="disabled"/>
<big><label for="stugadd3">Address Line 3</label></big>
<input type="text" class="input" id="cns17" name="stugadd3" disabled="disabled" size="18"/>
<br>
<br>
<big><label for="stugcity">City</label></big>
<input size="15" class="input" type="text" id="cns18" name="stugcity" disabled="disabled"/>
<big><label for="stugstate">State</label></big>
<input size="15" class="input" type="text" id="cns19" name="stugstate" disabled="disabled"/>
<big><label for="stugcountry">Country</label></big>
<input size="15" class="input" type="text" id="cns20" name="stugcountry" disabled="disabled"/>
<big><label for="stugpincode">Pincode</label></big>
<input size="10" class="input" type="text" id="cns21" name="stugpincode" disabled="disabled"/> </div>
</fieldset>
<br style="font-family: Comic Sans MS;">
</div>
<button class="accordion"><big>Sibling's Details</big></button>
<div id="foo" class="panel">
<big style="font-family: Comic Sans MS;"><big>Select Number of Siblings<span style="color: red; font-weight: bold;">*</span></big></big><span style="font-family: Comic Sans MS;"> </span>
<select name="app_siblingno" class="input" required>
<option value = "">--select one--</option>
<option value = "0">0</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
<option value = "6">6</option>
</select>
<br>
<br>
<div>
<table style="text-align: centre; width: 500px;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="6" rowspan="1" style="vertical-align: top;">
</td>
</tr>
<tr>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">S.No 1</span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"> Name</span> <input name="app_siblingname1" class="input">
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"> Birthdate</span> <input name="app_siblingdob1" class="input" type="date">
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"> Class</span>
<select name="app_siblingclass1" class="input">
<option value = "">--select one--</option>
<option value = "12">XII</option>
<option value = "11">XI</option>
<option value = "10">X</option>
<option value = "9">IX</option>
<option value = "8">VIII</option>
<option value = "7">VII</option>
<option value = "6">VI</option>
<option value = "5">V</option>
<option value = "4">IV</option>
<option value = "3">III</option>
<option value = "2">II</option>
<option value = "1">I</option>
<option value = "KG">KG/Prep</option>
<option value = "Nur">Nursery</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"> Gender</span>
<select name="app_siblinggender1" class="input">
<option value = "">--select one--</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
<option value = "Mx">Mx</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"> School Name</span> <input name="app_schlname1" class="input">
</td>
</tr>
<tr>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">2</span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingname2" class="input"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingdob2" class="input" type="date"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><select name="app_siblingclass2" class="input"></span>
<option value = "">--select one--</option>
<option value = "12">XII</option>
<option value = "11">XI</option>
<option value = "10">X</option>
<option value = "9">IX</option>
<option value = "8">VIII</option>
<option value = "7">VII</option>
<option value = "6">VI</option>
<option value = "5">V</option>
<option value = "4">IV</option>
<option value = "3">III</option>
<option value = "2">II</option>
<option value = "1">I</option>
<option value = "KG">KG/Prep</option>
<option value = "Nur">Nursery</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><select name="app_siblinggender2" class="input"></span>
<option value = "">--select one--</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
<option value = "Mx">Mx</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingschlname2" class="input"></span>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">3</span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname3" class="input"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob3" class="input" type="date"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass3" class="input"></span>
<option value = "">--select one--</option>
<option value = "12">XII</option>
<option value = "11">XI</option>
<option value = "10">X</option>
<option value = "9">IX</option>
<option value = "8">VIII</option>
<option value = "7">VII</option>
<option value = "6">VI</option>
<option value = "5">V</option>
<option value = "4">IV</option>
<option value = "3">III</option>
<option value = "2">II</option>
<option value = "1">I</option>
<option value = "KG">KG/Prep</option>
<option value = "Nur">Nursery</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender3" class="input"></span>
<option value = "">--select one--</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
<option value = "Mx">Mx</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname3" class="input"></span>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">4</span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname4" class="input"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob4" class="input" type="date"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass4" class="input"></span>
<option value = "">--select one--</option>
<option value = "12">XII</option>
<option value = "11">XI</option>
<option value = "10">X</option>
<option value = "9">IX</option>
<option value = "8">VIII</option>
<option value = "7">VII</option>
<option value = "6">VI</option>
<option value = "5">V</option>
<option value = "4">IV</option>
<option value = "3">III</option>
<option value = "2">II</option>
<option value = "1">I</option>
<option value = "KG">KG/Prep</option>
<option value = "Nur">Nursery</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender4" class="input"></span>
<option value = "">--select one--</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
<option value = "Mx">Mx</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname4" class="input"></span>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">5</span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname5" class="input"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob5" class="input" type="date"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass5" class="input"></span>
<option value = "">--select one--</option>
<option value = "12">XII</option>
<option value = "11">XI</option>
<option value = "10">X</option>
<option value = "9">IX</option>
<option value = "8">VIII</option>
<option value = "7">VII</option>
<option value = "6">VI</option>
<option value = "5">V</option>
<option value = "4">IV</option>
<option value = "3">III</option>
<option value = "2">II</option>
<option value = "1">I</option>
<option value = "KG">KG/Prep</option>
<option value = "Nur">Nursery</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender5" class="input"></span>
<option value = "">--select one--</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
<option value = "Mx">Mx</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname5" class="input"></span>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">6</span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname6" class="input"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob6" class="input" type="date"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass6" class="input"></span>
<option value = "">--select one--</option>
<option value = "12">XII</option>
<option value = "11">XI</option>
<option value = "10">X</option>
<option value = "9">IX</option>
<option value = "8">VIII</option>
<option value = "7">VII</option>
<option value = "6">VI</option>
<option value = "5">V</option>
<option value = "4">IV</option>
<option value = "3">III</option>
<option value = "2">II</option>
<option value = "1">I</option>
<option value = "KG">KG/Prep</option>
<option value = "Nur">Nursery</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender6" class="input"></span>
<option value = "">--select one--</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
<option value = "Mx">Mx</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname6" class="input"></span>
</td>
</tr>
</tbody>
</div>
</div>
<button class="accordion"><big>Document Upload</big></button>
<div id="foo" class="panel">
<h1>upload document here<h1>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
<input id="app_submit1" class="button1" name="app_submit1" value="<<Back" type="submit"> <input class="button1" name="app_submit2" value="Save" type="submit"> <input class="button1" name="app_submit3" value="Submit" type="submit"> <input class="button1" name="app_cancel2" value="Cancel" type="reset"><br>
</body>
</html>