is there a way to display child class items from one parent to another parent using JavaScript-CodePudding

the link consists of table with p1, p2, p3 and p4 class elements and there associated child class items. which are hidden, this should get displayed when clicked on the parent element.

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);
}

td.child {
  display: none;
}

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td >p1</td>
      <td >p1 Some content</td>
      <td >p1 Some content</td>
      <td >p1 Some content</td>
    </tr>
    <tr>
      <td >p2</td>
      <td >p2 Some content</td>
      <td >p2 Some content</td>
      <td >p2 Some content</td>
      <td >p2 Some content</td>
      <td >p2 Some content</td>
    </tr>
    <tr>
      <td >p3</td>
      <td >p3 Some content</td>
      <td >p3 Some content</td>
    </tr>
    <tr>
      <td >p4</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
    </tr>
  </tbody>
</table>

for example: if user has clicked on p3 it should display like this.

p1
p2
p3
p3 Some content
p3 Some content
p4

CodePudding user response：

Your problem was that you were trying to find the child elements of the clicked element. However, the elements that you are interested in are siblings.

So, you need to get the parent of the clicked element and then look for the child elements from that selector.

Specifically:

ev.currentTarget.parentElement.querySelectorAll('.child');

See demo:

var elements = document.getElementsByClassName("parent");

var myFunction = function(ev) {
  var childNodes = ev.currentTarget.parentElement.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);
}

td.child {
  display: none;
}

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td >p1</td>
      <td >p1 Some content</td>
      <td >p1 Some content</td>
      <td >p1 Some content</td>
    </tr>
    <tr>
      <td >p2</td>
      <td >p2 Some content</td>
      <td >p2 Some content</td>
      <td >p2 Some content</td>
      <td >p2 Some content</td>
      <td >p2 Some content</td>
    </tr>
    <tr>
      <td >p3</td>
      <td >p3 Some content</td>
      <td >p3 Some content</td>
    </tr>
    <tr>
      <td >p4</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Add the click listener (in a delegating manner) to the TR parent
Inside the listener, make sure the Event was originated from ".parent"
Toggle a class (like i.e: .is-open) to the TR element to show the TR's child TD Elements

// DOM utility functions:

const els = (sel, par) => (par || document).querySelectorAll(sel);


// Task: Toggle .child on .parent click:

const toggleChilds = (evt) => {
  if (!evt.target.closest(".parent")) return; // Click must originate from ".parent" Element
  evt.currentTarget.classList.toggle("is-open")
};
els(".parent").forEach(elPar => elPar.closest("tr").addEventListener('click', toggleChilds));

table, th, td { border: 1px solid black; }

/* Toggle cells */
td.child { display: none; }
tr.is-open td.child { display: table-cell; }

<table>
  <tbody>
    <tr>
      <td >p1</td>
      <td >p1 Some content</td>
      <td >p1 Some content</td>
      <td >p1 Some content</td>
    </tr>
    <tr>
      <td >p2</td>
      <td >p2 Some content</td>
      <td >p2 Some content</td>
      <td >p2 Some content</td>
      <td >p2 Some content</td>
      <td >p2 Some content</td>
    </tr>
    <tr>
      <td >p3</td>
      <td >p3 Some content</td>
      <td >p3 Some content</td>
    </tr>
    <tr>
      <td >p4</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
      <td >p4 Some content</td>
    </tr>
  </tbody>
</table>