user3101852 user3101852 - 3 months ago 10
HTML Question

jquery hide and show is not working when the div is called outside td block of table

Here when I click on

No
the text box should get hidden but it is not happening. When I put the same
div
inside the
td
from where I am calling the
onclick
event it is working.

<!DOCTYPE html>
<html>
<head>
<script>
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#data").show();
});
$("#btn2").click(function(){
$("#data").hide();
});
});
</script>
</head>

<table>
<tr>
<th>Table</th>
<td>
<input type="radio" id="btn1" name="gate" value="N" checked>Yes</input>
<input type="radio" id="btn2" name="gate" value="E" >No</input>
</td>
</tr>

<div id="data" style="padding-top: 10px">
<tr>
<th>GATE</th>
<td><input type="text" name="gate1" value=gate1 size="20"></td>
</tr>
</div>
</table>
</html>

Answer

Have a look

 $(document).ready(function(){
  $("#btn1").click(function(){
  $("#data").show();
 });
 $("#btn2").click(function(){
  $("#data").hide();
 });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">   
</script>

</head>

<table>
<tr>
<th>Table</th>
<td>
  <input type="radio" id="btn1" name="gate" value="N" checked>Yes</input>
  <input type="radio" id="btn2" name="gate" value="E" >No</input>  
</td>
</tr>
<tr  id="data">
<th>GATE</th>
<td><input type="text" name="gate1" value=gate1 size="20"></td>
</tr>


</table> 
</html>

Comments