By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,963 Members | 1,714 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,963 IT Pros & Developers. It's quick & easy.

Accordian not working properly with jquery table

P: 11
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.

`
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.       <meta name="viewport" content="width=device-width, initial-scale=1">
  5.       <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  6.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  7.       <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  8.  
  9. <!--This is Javascript to disable the address fields if user doesn't tick the checkbox-->
  10.         <script type="text/javascript">
  11.         $(document).ready(function(){
  12.             $('#sccb').click(function(){
  13.                 if (this.checked) {
  14.                     $('#cns').removeAttr("disabled");
  15.                     $('#cns2').removeAttr("disabled");
  16.                     $('#cns3').removeAttr("disabled");
  17.                     $('#cns4').removeAttr("disabled");
  18.                     $('#cns5').removeAttr("disabled");
  19.                     $('#cns6').removeAttr("disabled");
  20.                     $('#cns7').removeAttr("disabled");
  21.                 } else {
  22.                     $("#cns").attr("disabled", true);
  23.                     $("#cns2").attr("disabled", true);
  24.                     $("#cns3").attr("disabled", true);
  25.                     $('#cns4').attr("disabled", true);
  26.                     $('#cns5').attr("disabled", true);
  27.                     $('#cns6').attr("disabled", true);
  28.                     $('#cns7').attr("disabled", true);
  29.                 }
  30.             });
  31.         });
  32.         </script>
  33.         <script type="text/javascript">
  34.         $(document).ready(function(){
  35.             $('#sccb1').click(function(){
  36.                 if (this.checked) {
  37.                     $('#cns8').removeAttr("disabled");
  38.                     $('#cns9').removeAttr("disabled");
  39.                     $('#cns10').removeAttr("disabled");
  40.                     $('#cns11').removeAttr("disabled");
  41.                     $('#cns12').removeAttr("disabled");
  42.                     $('#cns13').removeAttr("disabled");
  43.                     $('#cns14').removeAttr("disabled");
  44.  
  45.                 } else {
  46.                     $("#cns8").attr("disabled", true);
  47.                     $("#cns9").attr("disabled", true);
  48.                     $("#cns10").attr("disabled", true);
  49.                     $("#cns11").attr("disabled", true);
  50.                     $("#cns12").attr("disabled", true);
  51.                     $("#cns13").attr("disabled", true);
  52.                     $("#cns14").attr("disabled", true);
  53.                 }
  54.             });
  55.         });
  56.         </script>
  57.         <script type="text/javascript">
  58.         $(document).ready(function(){
  59.             $('#sccb2').click(function(){
  60.                 if (this.checked) {
  61.                     $('#cns15').removeAttr("disabled");
  62.                     $('#cns16').removeAttr("disabled");
  63.                     $('#cns17').removeAttr("disabled");
  64.                     $('#cns18').removeAttr("disabled");
  65.                     $('#cns19').removeAttr("disabled");
  66.                     $('#cns20').removeAttr("disabled");
  67.                     $('#cns21').removeAttr("disabled");
  68.  
  69.                 } else {
  70.                     $("#cns15").attr("disabled", true);
  71.                     $("#cns16").attr("disabled", true);
  72.                     $("#cns17").attr("disabled", true);
  73.                     $("#cns18").attr("disabled", true);
  74.                     $("#cns19").attr("disabled", true);
  75.                     $("#cns20").attr("disabled", true);
  76.                     $("#cns21").attr("disabled", true);
  77.                 }
  78.             });
  79.         });
  80.         </script>
  81.         <script>
  82.  
  83.         jQuery(function($){
  84.         $( document ).ready(function() {
  85.             $( "select" ).change(function () {
  86.                 var val = this.value;
  87.                 if (val != 'select one') {
  88.                     var tableRows = $("table tr");
  89.                     jQuery.each(tableRows, function(i ,tr) {
  90.                         if (i > val) {
  91.                             $(tr).hide();
  92.                         } else {
  93.                             $(tr).show();
  94.                         }
  95.                     })
  96.                 }
  97.               }
  98.             )
  99.         });
  100.         });
  101.  
  102.         </script>
  103.         <style>
  104.         button.accordion {
  105.             background-color: #33CCFF;
  106.             color: #444;
  107.             cursor: pointer;
  108.             margin: 15px;
  109.             padding: 14px;
  110.             width: 1250px;
  111.             border: 2px;
  112.             text-align: left;
  113.             font-family: Comic Sans MS;
  114.             text-decoration: underline;
  115.             font-weight: bold;
  116.             outline: none;
  117.             font-size: 15px;
  118.             transition: 0.4s;
  119.             border:1px solid #ccc;
  120.             border-radius:5px;
  121.         }
  122.  
  123.         button.accordion.active, button.accordion:hover {
  124.             background-color: #ddd;
  125.         }
  126.  
  127.         button.accordion:after {
  128.             content: '\02795';
  129.             font-size: 14px;
  130.             color: #777;
  131.             float: right;
  132.             margin-left: 5px;
  133.         }
  134.  
  135.         button.accordion.active:after {
  136.             content: "\2796";
  137.         }
  138.  
  139.         div.panel {
  140.             padding: 0 25px;
  141.             background-color: white;
  142.             max-height: 0;
  143.             overflow: hidden;
  144.             transition: 0.6s ease-in-out;
  145.             opacity: 0;
  146.         }
  147.  
  148.         div.panel.show {
  149.             opacity: 1;
  150.             max-height: 1500px;
  151.         }
  152.  
  153.         tbody tr {
  154.         display: none;
  155.         }
  156.         </style>
  157.     </head>
  158.         <body>
  159.         <button class="accordion"><big>Guardian's Details</big></button>
  160.         <div id="foo" class="panel">
  161.           <fieldset>
  162.         <fieldset style="width: 1220px;">
  163.         <legend style="font-weight: bold; font-family: Comic Sans MS;text-decoration: underline;">Personal Details</legend>
  164.         <div style="width: 1230px;" class="form-group"> 
  165.         <big><label for="stugtitle">Title<span style="color: red;">*</span></label></big>
  166.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  167.         <select name="stugtitle" class="input" required>
  168.         <option value="">--select--</option>
  169.         <option value="Mr">Mr</option>
  170.         <option value="Mrs">Mrs</option>
  171.         <option value="Mrs">Mrs</option>
  172.         <option value="Ms">Ms</option>
  173.         <option value="Miss">Miss</option>
  174.         <option value="Dr">Dr</option>
  175.         </select>
  176.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  177.         <big><label for="stugfname">Firstname<span style="color: red;">*</span></label></big>
  178.         &nbsp;&nbsp;&nbsp;
  179.         <input size="15" name="stugfname" class="input" required>
  180.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  181.         <big><label for="stugmname">Middlename</label></big>
  182.         &nbsp;&nbsp;&nbsp;
  183.         <input size="15" class="input" name="stugmname">
  184.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  185.         <big><label for="stugsname">Surname<span style="color: red;">*</span></label></big>
  186.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  187.         <input size="15" class="input" name="stugsname" required>
  188.         </div>
  189.         <br>
  190.         <big><label for="stuggender">Gender<span style="color: red;">*</span></label></big>
  191.         &nbsp;
  192.         <select name="stuggender" class="input" required>
  193.         <option value="">--select--</option>
  194.         <option value="M">Male</option>
  195.         <option value="F">Female</option>
  196.         <option value="Mx">Mx</option>
  197.         </select>
  198.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  199.         <big><label for="stugdob">Birthdate<span style="color: red;">*</span></label></big>
  200.         &nbsp;&nbsp;&nbsp;&nbsp; 
  201.         <input size="15" name="stugdob" class="input" type="date" required>
  202.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  203.         <big><label for="stugmobile">Mobile<span style="color: red;">*</span></label></big>
  204.         &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  205.         <input size="15" class="input" name="stugmobile" required>
  206.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  207.         <big><label for="stugemail">Email<span style="color: red;">*</span></label></big>
  208.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  209.         <input size="19" class="input" name="stugemail" type="email" required>
  210.         </fieldset>
  211.         <br><br>
  212.         <fieldset>
  213.         <fieldset style="width: 1220px;">
  214.         <legend style="font-weight: bold; font-family: Comic Sans MS; text-decoration: underline;">Address Details</legend>
  215.         <div style="width: 1230px;" class="form-group">
  216.         <big><big><big><label for="stugaddress">Adress not same as applicant's address<span style="color: red;">*</span></label></big></big></big>
  217.         &nbsp;&nbsp;
  218.         <input type="checkbox" id="sccb2" name="stugaddress" value="stugaddress">
  219.         (<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>
  220.               <br>
  221.               <big><label for="stugadd1">Address Line 1</label></big>
  222.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  223.         <input type="text" class="input" id="cns15" name="stugadd1" disabled="disabled"/>
  224.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
  225.         <big><label for="stugadd2">Address Line 2</label></big>
  226.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  227.         <input type="text" class="input" id="cns16" name="stugadd2" disabled="disabled"/>
  228.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
  229.         <big><label for="stugadd3">Address Line 3</label></big>
  230.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  231.         <input type="text" class="input" id="cns17" name="stugadd3" disabled="disabled" size="18"/>
  232.         <br>
  233.         <br>
  234.         <big><label for="stugcity">City</label></big>
  235.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  236.         <input size="15" class="input" type="text" id="cns18" name="stugcity" disabled="disabled"/>
  237.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  238.         <big><label for="stugstate">State</label></big>
  239.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  240.         <input size="15" class="input" type="text" id="cns19" name="stugstate" disabled="disabled"/>
  241.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  242.         <big><label for="stugcountry">Country</label></big>
  243.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  244.         <input size="15" class="input" type="text" id="cns20" name="stugcountry" disabled="disabled"/>
  245.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  246.         <big><label for="stugpincode">Pincode</label></big>
  247.         &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; 
  248.         <input size="10" class="input" type="text" id="cns21" name="stugpincode" disabled="disabled"/> </div>
  249.         </fieldset>
  250.         <br style="font-family: Comic Sans MS;">
  251.         </div>
  252.  
  253.         <button class="accordion"><big>Sibling's Details</big></button>
  254.         <div id="foo" class="panel">
  255.         <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>
  256.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  257.         <select name="app_siblingno" class="input" required>
  258.         <option value = "">--select one--</option>
  259.         <option value = "0">0</option>
  260.         <option value = "1">1</option>
  261.         <option value = "2">2</option>
  262.         <option value = "3">3</option>
  263.         <option value = "4">4</option>
  264.         <option value = "5">5</option>
  265.         <option value = "6">6</option>
  266.         </select>
  267.         <br>
  268.         <br>
  269.         <div>
  270.         <table style="text-align: centre; width: 500px;" border="0"
  271.         cellpadding="0" cellspacing="0">
  272.         <tbody>
  273.         <tr>
  274.         <td colspan="6" rowspan="1" style="vertical-align: top;">
  275.         </td>
  276.         </tr>
  277.         <tr>
  278.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">S.No    1</span>
  279.         </td>
  280.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;Name</span>&nbsp;<input name="app_siblingname1" class="input">
  281.         </td>
  282.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;Birthdate</span>&nbsp;<input name="app_siblingdob1" class="input" type="date">
  283.         </td>
  284.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;Class</span>&nbsp;
  285.         <select name="app_siblingclass1" class="input">
  286.         <option value = "">--select one--</option>
  287.         <option value = "12">XII</option>
  288.         <option value = "11">XI</option>
  289.         <option value = "10">X</option>
  290.         <option value = "9">IX</option>
  291.         <option value = "8">VIII</option>
  292.         <option value = "7">VII</option>
  293.         <option value = "6">VI</option>
  294.         <option value = "5">V</option>
  295.         <option value = "4">IV</option>
  296.         <option value = "3">III</option>
  297.         <option value = "2">II</option>
  298.         <option value = "1">I</option>
  299.         <option value = "KG">KG/Prep</option>
  300.         <option value = "Nur">Nursery</option>
  301.         </td>
  302.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;Gender</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  303.         <select name="app_siblinggender1" class="input">
  304.         <option value = "">--select one--</option>
  305.         <option value = "M">Male</option>
  306.         <option value = "F">Female</option>
  307.         <option value = "Mx">Mx</option>
  308.         </td>
  309.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;School Name</span>&nbsp;<input name="app_schlname1" class="input">
  310.         </td>
  311.         </tr>
  312.         <tr>
  313.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">2</span>
  314.         </td>
  315.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingname2" class="input"></span>
  316.         </td>
  317.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingdob2" class="input" type="date"></span>
  318.         </td>
  319.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><select name="app_siblingclass2" class="input"></span>
  320.         <option value = "">--select one--</option>
  321.         <option value = "12">XII</option>
  322.         <option value = "11">XI</option>
  323.         <option value = "10">X</option>
  324.         <option value = "9">IX</option>
  325.         <option value = "8">VIII</option>
  326.         <option value = "7">VII</option>
  327.         <option value = "6">VI</option>
  328.         <option value = "5">V</option>
  329.         <option value = "4">IV</option>
  330.         <option value = "3">III</option>
  331.         <option value = "2">II</option>
  332.         <option value = "1">I</option>
  333.         <option value = "KG">KG/Prep</option>
  334.         <option value = "Nur">Nursery</option>
  335.         </td>
  336.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><select name="app_siblinggender2" class="input"></span>
  337.         <option value = "">--select one--</option>
  338.         <option value = "M">Male</option>
  339.         <option value = "F">Female</option>
  340.         <option value = "Mx">Mx</option>
  341.         </td>
  342.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingschlname2" class="input"></span>
  343.         </td>
  344.         </tr>
  345.         <tr>
  346.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">3</span>
  347.         </td>
  348.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname3" class="input"></span>
  349.         </td>
  350.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob3" class="input" type="date"></span>
  351.         </td>
  352.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass3" class="input"></span>
  353.         <option value = "">--select one--</option>
  354.         <option value = "12">XII</option>
  355.         <option value = "11">XI</option>
  356.         <option value = "10">X</option>
  357.         <option value = "9">IX</option>
  358.         <option value = "8">VIII</option>
  359.         <option value = "7">VII</option>
  360.         <option value = "6">VI</option>
  361.         <option value = "5">V</option>
  362.         <option value = "4">IV</option>
  363.         <option value = "3">III</option>
  364.         <option value = "2">II</option>
  365.         <option value = "1">I</option>
  366.         <option value = "KG">KG/Prep</option>
  367.         <option value = "Nur">Nursery</option>
  368.         </td>
  369.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender3" class="input"></span>
  370.         <option value = "">--select one--</option>
  371.         <option value = "M">Male</option>
  372.         <option value = "F">Female</option>
  373.         <option value = "Mx">Mx</option>
  374.         </td>
  375.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname3" class="input"></span>
  376.         </td>
  377.         </tr>
  378.         <tr>
  379.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">4</span>
  380.         </td>
  381.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname4" class="input"></span>
  382.         </td>
  383.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob4" class="input" type="date"></span>
  384.         </td>
  385.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass4" class="input"></span>
  386.         <option value = "">--select one--</option>
  387.         <option value = "12">XII</option>
  388.         <option value = "11">XI</option>
  389.         <option value = "10">X</option>
  390.         <option value = "9">IX</option>
  391.         <option value = "8">VIII</option>
  392.         <option value = "7">VII</option>
  393.         <option value = "6">VI</option>
  394.         <option value = "5">V</option>
  395.         <option value = "4">IV</option>
  396.         <option value = "3">III</option>
  397.         <option value = "2">II</option>
  398.         <option value = "1">I</option>
  399.         <option value = "KG">KG/Prep</option>
  400.         <option value = "Nur">Nursery</option>
  401.         </td>
  402.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender4" class="input"></span>
  403.         <option value = "">--select one--</option>
  404.         <option value = "M">Male</option>
  405.         <option value = "F">Female</option>
  406.         <option value = "Mx">Mx</option>
  407.         </td>
  408.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname4" class="input"></span>
  409.         </td>
  410.         </tr>
  411.         <tr>
  412.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">5</span>
  413.         </td>
  414.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname5" class="input"></span>
  415.         </td>
  416.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob5" class="input" type="date"></span>
  417.         </td>
  418.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass5" class="input"></span>
  419.         <option value = "">--select one--</option>
  420.         <option value = "12">XII</option>
  421.         <option value = "11">XI</option>
  422.         <option value = "10">X</option>
  423.         <option value = "9">IX</option>
  424.         <option value = "8">VIII</option>
  425.         <option value = "7">VII</option>
  426.         <option value = "6">VI</option>
  427.         <option value = "5">V</option>
  428.         <option value = "4">IV</option>
  429.         <option value = "3">III</option>
  430.         <option value = "2">II</option>
  431.         <option value = "1">I</option>
  432.         <option value = "KG">KG/Prep</option>
  433.         <option value = "Nur">Nursery</option>
  434.         </td>
  435.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender5" class="input"></span>
  436.         <option value = "">--select one--</option>
  437.         <option value = "M">Male</option>
  438.         <option value = "F">Female</option>
  439.         <option value = "Mx">Mx</option>
  440.         </td>
  441.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname5" class="input"></span>
  442.         </td>
  443.         </tr>
  444.         <tr>
  445.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">6</span>
  446.         </td>
  447.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname6" class="input"></span>
  448.         </td>
  449.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob6" class="input" type="date"></span>
  450.         </td>
  451.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass6" class="input"></span>
  452.         <option value = "">--select one--</option>
  453.         <option value = "12">XII</option>
  454.         <option value = "11">XI</option>
  455.         <option value = "10">X</option>
  456.         <option value = "9">IX</option>
  457.         <option value = "8">VIII</option>
  458.         <option value = "7">VII</option>
  459.         <option value = "6">VI</option>
  460.         <option value = "5">V</option>
  461.         <option value = "4">IV</option>
  462.         <option value = "3">III</option>
  463.         <option value = "2">II</option>
  464.         <option value = "1">I</option>
  465.         <option value = "KG">KG/Prep</option>
  466.         <option value = "Nur">Nursery</option>
  467.         </td>
  468.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender6" class="input"></span>
  469.         <option value = "">--select one--</option>
  470.         <option value = "M">Male</option>
  471.         <option value = "F">Female</option>
  472.         <option value = "Mx">Mx</option>
  473.         </td>
  474.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname6" class="input"></span>
  475.         </td>
  476.         </tr>
  477.         </tbody>
  478.         </div>
  479.         </div>
  480.         <button class="accordion"><big>Document Upload</big></button>
  481.         <div id="foo" class="panel">
  482.         <h1>upload document here<h1>
  483.     <script>
  484.     var acc = document.getElementsByClassName("accordion");
  485.     var i;
  486.  
  487.     for (i = 0; i < acc.length; i++) {
  488.         acc[i].onclick = function(){
  489.         this.classList.toggle("active");
  490.         this.nextElementSibling.classList.toggle("show");
  491.          }
  492.     }
  493.     </script>
  494.         &nbsp;&nbsp; <input id="app_submit1" class="button1" name="app_submit1" value="&lt;&lt;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>
  495.         </body>
  496. </html>
Sep 1 '16 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.