Collapsing Table Row Using ASP Checkbox and JavaScript

Question

I'm using ASP and JavaScript. I have a table, checkbox and textbox fields on my page. When the checkbox is checked I want to show the first TextBox and collapse TextBox2 and TextBox3 Table Rows. If the Checkbox is Un-Checked I want to collapse the Table Rows upwards. How can this be done?

For Example:

This is what I tried:

<table>
    <tr>
        <td>
            <asp:CheckBox ID="chkbxUS" runat="server" onchange="validate();" />
        </td>
    </tr>
    <tr id="ParentCountryInfo1">
        <td>
            <asp:TextBox ID="TextBox1" runat="server">Checked Show Me</asp:TextBox>
        </td>
    </tr>
    <tr id="ParentCountryInfo2">
        <td>
            <asp:TextBox ID="TextBox2" runat="server">Un-Checked Show ME</asp:TextBox>
        </td>
    </tr>
    <tr id="ParentCountryInfo3">
        <td>
            <asp:TextBox ID="TextBox3" runat="server">Un-Checked Show ME</asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
             Hello World
        </td>
    </tr>
</table>

<script type="text/javascript">
    function validate() {
        if (document.getElementById('<%=chkbxUS.ClientID%>').checked) {
            document.getElementById('ParentCountryInfo1').style.visibility = 'hidden';
            document.getElementById('ParentCountryInfo2').style.visibility = 'hidden';
            document.getElementById('ParentCountryInfo3').style.visibility = 'hidden';
        } else {
            document.getElementById('ParentCountryInfo1').style.visibility = 'visible';
            document.getElementById('ParentCountryInfo2').style.visibility = 'visible';
            document.getElementById('ParentCountryInfo3').style.visibility = 'visible';
        }
    }
</script>

Answer 1

If I get your problem right then following code might solve your problem.

<table>
   <tr>
     <td>
        <asp:CheckBox ID="chkbxUS" runat="server" />
     </td>
   </tr>
   <tr id="ParentCountryInfo1">
      <td>
        <asp:TextBox ID="TextBox1" runat="server">Checked Show Me</asp:TextBox>
      </td>
    </tr>
    <tr id="ParentCountryInfo2">
      <td>
        <asp:TextBox ID="TextBox2" runat="server">Un-Checked Show ME</asp:TextBox>
      </td>
    </tr>
    <tr id="ParentCountryInfo3">
      <td>
        <asp:TextBox ID="TextBox3" runat="server">Un-Checked Show ME</asp:TextBox>
      </td>
   </tr>
   <tr>
      <td>
         Hello World
      </td>
   </tr>
 </table>
 <script type="text/javascript">
   $(document).ready(function () {
    $("#chkbxUS").change(function () {

    if ($(this).is(":checked")) {
        $("#TextBox1").show();
        $("#TextBox2").hide();
        $("#TextBox3").hide();
    }
   else
    {
        $("#TextBox1").hide();
        $("#TextBox2").show();
        $("#TextBox3").show();
    }
});


   });

I hope this helps.