How to show/hide Child gridview based on CheckBox Click in Parent Grid No PostBack

I am not a JavaScript expert and I have a need to display a hidden child gridview when the parent gridview checkbox is checked or hidden when the parent checkbox is unchecked. The child gridview is initially not displayed.
I have attached code that I have developed so far.

Experts please help. Thanks.  CodeExample.txt
Who is Participating?
meagain35Connect With a Mentor Commented:
Try implementing something like this around your child grid.


<script language='javascript'>
  function show_hide() {
    var action = "hide";

    if(document.getElementById('chk').checked == true) {
        action = "show";
     } else {
        action = "hide";
    if (action == "hide") {
    if(action == "show") {


<form name="form1">
  <input type="checkbox" onclick="show_hide()" id="chk">Show/Hide</input>

  <div id="myGridDiv" style="width:100px; height:100px; background-color:#FF0000; display:none;">
     My Grid


Open in new window

mconti41Author Commented:
Thanks for the response...

The result is excellent for the first gridview row but the other gridview rows do not respond to a click> Do you have any thoughts on this.

mconti41Author Commented:
Solution only handled first gridview row and not a multiple row gridview.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.