is there a way to display the child items of the selected parent of the div? looking for pure JavaScript solution..(not using Jquery or any library)

Question

below is the current solution that i have developed..

<script>
  var elements = document.getElementsByClassName("parent");
  var myFunction = function() {
      var childNode = document.querySelector('.child');
      if(childNode.style.display == "block")
        childNode.style.display = "none";
      else
        childNode.style.display = "block";
  };
  for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('click', myFunction, false);
  }
</script>

below link has the entire code... jsfiddle currently its displays only one row item of p1 even when i click on any of he options p1, p2, p3 and p4..

https://stackoverflow.com/questions/16302045/finding-child-element-of-parent-with-javascript — rohan1122, Jul 05 '22 at 06:25
Does this answer your question? [Finding child element of parent with JavaScript](https://stackoverflow.com/questions/16302045/finding-child-element-of-parent-with-javascript) — Nick, Jul 05 '22 at 06:29
You should change `document` to `this` in : `var childNode = document.querySelector('.child');` — Xupitan, Jul 05 '22 at 06:31

score 0 · Accepted Answer · answered Jul 05 '22 at 06:32

Just take the parent from the click event and use querySelectorAll to get the childs of the target of the event (the parent), then iterate over the childs to check if they should be displayed or hidden.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .child {
      display: none;
    }
  </style>

</head>

<body>
  <table></table>
  <div class="parent">p1
    <div class="child">p1 Some content</div>
    <div class="child">p1 Some content</div>
    <div class="child">p1 Some content</div>
  </div>
  <div class="parent">p2
    <div class="child">p2 Some content</div>
    <div class="child">p2 Some content</div>
    <div class="child">p2 Some content</div>
    <div class="child">p2 Some content</div>
    <div class="child">p2 Some content</div>
  </div>
  <div class="parent">p3
    <div class="child">p3 Some content</div>
    <div class="child">p3 Some content</div>
  </div>
  <div class="parent">p4
    <div class="child">p4 Some content</div>
    <div class="child">p4 Some content</div>
    <div class="child">p4 Some content</div>
    <div class="child">p4 Some content</div>
    <div class="child">p4 Some content</div>
    <div class="child">p4 Some content</div>
    <div class="child">p4 Some content</div>
  </div>
</body>
<script>
  var elements = document.getElementsByClassName("parent");
  var myFunction = function(ev) {
    var childNodes = ev.target.querySelectorAll('.child');
    childNodes.forEach(child => {
      if (child.style.display == "block")
        child.style.display = "none";
      else
        child.style.display = "block";
    })
  };
  for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
  }
</script>

</html>

Thanks alot for the solution, i have edited the question a bit, could you pls suggest how to display the child class items? https://jsfiddle.net/DayakarKodirekka/dqjmLt0h/4/ — user19317490, Jul 05 '22 at 07:41

is there a way to display the child items of the selected parent of the div? looking for pure JavaScript solution..(not using Jquery or any library)

1 Answers1