javascript - Want to hide other parents child when click on any one parent element -

i want hide child's elements of every parent element expect child elements has been clicked, means child items of other parent should have hidden when clicked on 1 parent toggling children.

i can't change html.

any 1 give me idea it, please, in advance.

function togglechild(classval){      var x = document.getelementsbyclassname(classval);      for(var i=0;i<x.length;i++){          if (x[i].style.display == "none") {              x[i].style.display = "block";          } else {              x[i].style.display = "none";          }      }  }

<table>    <tbody>      <tr onclick="togglechild('child1')"><td>parent1</td></tr>      <tr>        <td>          <table>            <tbody>              <tr class="child1" style="display:none"><td>i child of parent1</td></tr>              <tr class="child1" style="display:none"><td>i child of parent1</td></tr>              <tr onclick="togglechild('child2')"><td>parent2</td></tr>              <tr class="child2" style="display:none"><td>i child of parent2</td></tr>              <tr class="child2" style="display:none"><td>i child of parent2</td></tr>              <tr class="child2" style="display:none"><td>i child of parent2</td></tr>              <tr onclick="togglechild('child3')"><td>parent3</td></tr>              <tr class="child3" style="display:none"><td>i child of parent3</td></tr>              <tr class="child3" style="display:none"><td>i child of parent3</td></tr>              <tr class="child3" style="display:none"><td>i child of parent3</td></tr>              <tr onclick="togglechild('child4')"><td>parent4</td></tr>              <tr class="child4" style="display:none"><td>i child of parent4</td></tr>              <tr class="child4" style="display:none"><td>i child of parent4</td></tr>            </tbody>          </table>        </td>      </tr>    </tbody>  </table>

i give children common class can this:

function togglechild(classval) {      var x = document.getelementsbyclassname('child');      (var = 0; < x.length; i++) {          if (x[i].classlist.contains(classval)) {              x[i].style.display = "block";          } else {              x[i].style.display = "none";          }      }  }

.child {display:none;}

<table>    <tbody>      <tr onclick="togglechild('child1')">        <td>parent1</td>      </tr>      <tr>        <td>          <table>            <tbody>              <tr class="child1 child">                <td>i child of parent1</td>              </tr>              <tr class="child1 child">                <td>i child of parent1</td>              </tr>              <tr onclick="togglechild('child2')">                <td>parent2</td>              </tr>              <tr class="child2 child">                <td>i child of parent2</td>              </tr>              <tr class="child2 child">                <td>i child of parent2</td>              </tr>              <tr class="child2 child">                <td>i child of parent2</td>              </tr>              <tr onclick="togglechild('child3')">                <td>parent3</td>              </tr>              <tr class="child3 child">                <td>i child of parent3</td>              </tr>              <tr class="child3 child">                <td>i child of parent3</td>              </tr>              <tr class="child3 child">                <td>i child of parent3</td>              </tr>              <tr onclick="togglechild('child4')">                <td>parent4</td>              </tr>              <tr class="child4 child">                <td>i child of parent4</td>              </tr>              <tr class="child4 child">                <td>i child of parent4</td>              </tr>            </tbody>          </table>        </td>      </tr>    </tbody>  </table>