CODEWITHSUNDEEP
javascripthtml
Praveen Rawat
Praveen Rawat

Reputation: 734

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

I want to hide all child's elements of every Parent Element expect those child elements who has been clicked, means the child items of other parent should have to hidden when i clicked on any one parent for toggling its children.

I can't change the HTML.

Any one give me idea about it, Please, Thanks for you help 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 AM CHILD OF PARENT1</td></tr>
            <tr class="child1" style="display:none"><td>I AM CHILD OF PARENT1</td></tr>
            <tr onclick="toggleChild('child2')"><td>PARENT2</td></tr>
            <tr class="child2" style="display:none"><td>I AM CHILD OF PARENT2</td></tr>
            <tr class="child2" style="display:none"><td>I AM CHILD OF PARENT2</td></tr>
            <tr class="child2" style="display:none"><td>I AM CHILD OF PARENT2</td></tr>
            <tr onclick="toggleChild('child3')"><td>PARENT3</td></tr>
            <tr class="child3" style="display:none"><td>I AM CHILD OF PARENT3</td></tr>
            <tr class="child3" style="display:none"><td>I AM CHILD OF PARENT3</td></tr>
            <tr class="child3" style="display:none"><td>I AM CHILD OF PARENT3</td></tr>
            <tr onclick="toggleChild('child4')"><td>PARENT4</td></tr>
            <tr class="child4" style="display:none"><td>I AM CHILD OF PARENT4</td></tr>
            <tr class="child4" style="display:none"><td>I AM CHILD OF PARENT4</td></tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 94

Answers (3)

Edson Horacio Junior
Edson Horacio Junior

Reputation: 3143

First, you forgot to create the first tr with onclick="toogleChild('child1')".

Here is the code:

<table>
  <tbody>
    <tr onclick="toggleChild('child1')"><td>PARENT1</td></tr>
    <tr>
      <td>
        <table>
          <tbody>
            <tr onclick="toggleChild('child1')"><td>PARENT2</td></tr>
            <tr class="child1"><td>I AM CHILD OF PARENT1</td></tr>
            <tr class="child1"><td>I AM CHILD OF PARENT1</td></tr>
            <tr onclick="toggleChild('child2')"><td>PARENT2</td></tr>
            <tr class="child2"><td>I AM CHILD OF PARENT2</td></tr>
            <tr class="child2"><td>I AM CHILD OF PARENT2</td></tr>
            <tr class="child2"><td>I AM CHILD OF PARENT2</td></tr>
            <tr onclick="toggleChild('child3')"><td>PARENT3</td></tr>
            <tr class="child3"><td>I AM CHILD OF PARENT3</td></tr>
            <tr class="child3"><td>I AM CHILD OF PARENT3</td></tr>
            <tr class="child3"><td>I AM CHILD OF PARENT3</td></tr>
            <tr onclick="toggleChild('child4')"><td>PARENT4</td></tr>
            <tr class="child4"><td>I AM CHILD OF PARENT4</td></tr>
            <tr class="child4"><td>I AM CHILD OF PARENT4</td></tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Always put javascript code at the end of the document, the reason is here in the Put Scripts at the Bottom topic

function toggleChild(childN) {
  // loop through every tr whose class attribute begins with 'child'
  $('tr[class^=\'child\')').each(function(index, tr){

    // if this tr is the one toggled, shows it
    if (tr.attr('class') == childN) {
      tr.show();

    } else { // if is not, hide it
      tr.hide();
    }
  });
}

Upvotes: 1

abir_maiti
abir_maiti

Reputation: 490

You can achieve the same with jQuery. Please follow this fiddle - http://jsfiddle.net/wh9qqegs/.

HTML

<tbody>
    <tr data-target="child1"><td>PARENT1</td></tr>
    <tr>
      <td>
        <table>
            <tbody>
                <tr class="child child1"><td>I AM CHILD OF PARENT1</td></tr>
                <tr class="child child1"><td>I AM CHILD OF PARENT1</td></tr>
                <tr data-target="child2"><td>PARENT2</td></tr>
                <tr class="child child2"><td>I AM CHILD OF PARENT2</td></tr>
                <tr class="child child2"><td>I AM CHILD OF PARENT2</td></tr>
                <tr class="child child2"><td>I AM CHILD OF PARENT2</td></tr>
                <tr data-target="child3"><td>PARENT3</td></tr>
                <tr class="child child3"><td>I AM CHILD OF PARENT3</td></tr>
                <tr class="child child3"><td>I AM CHILD OF PARENT3</td></tr>
                <tr class="child child3"><td>I AM CHILD OF PARENT3</td></tr>
                <tr data-target="child4"><td>PARENT4</td></tr>
                <tr class="child child4"><td>I AM CHILD OF PARENT4</td></tr>
                <tr class="child child4"><td>I AM CHILD OF PARENT4</td></tr>
            </tbody>
        </table>
       </td>
    </tr>
  </tbody>
</table>

JQuery

$('tr').on('click', function(e){
    var target = '.'+$(this).data('target');
    if(target != ''){
        $('.child').not(target).css({display: 'none'}); 
        $(target).css({display: 'block'});
    }
});

Let me know if this is what you want.

Upvotes: 1

Pete
Pete

Reputation: 58432

I would give your children a common class then you can do it like this:

function toggleChild(classVal) {
    var x = document.getElementsByClassName('child');
    for (var i = 0; i < 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 AM CHILD OF PARENT1</td>
            </tr>
            <tr class="child1 child">
              <td>I AM CHILD OF PARENT1</td>
            </tr>
            <tr onclick="toggleChild('child2')">
              <td>PARENT2</td>
            </tr>
            <tr class="child2 child">
              <td>I AM CHILD OF PARENT2</td>
            </tr>
            <tr class="child2 child">
              <td>I AM CHILD OF PARENT2</td>
            </tr>
            <tr class="child2 child">
              <td>I AM CHILD OF PARENT2</td>
            </tr>
            <tr onclick="toggleChild('child3')">
              <td>PARENT3</td>
            </tr>
            <tr class="child3 child">
              <td>I AM CHILD OF PARENT3</td>
            </tr>
            <tr class="child3 child">
              <td>I AM CHILD OF PARENT3</td>
            </tr>
            <tr class="child3 child">
              <td>I AM CHILD OF PARENT3</td>
            </tr>
            <tr onclick="toggleChild('child4')">
              <td>PARENT4</td>
            </tr>
            <tr class="child4 child">
              <td>I AM CHILD OF PARENT4</td>
            </tr>
            <tr class="child4 child">
              <td>I AM CHILD OF PARENT4</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions