Develop Reference

Why doesn't my click handler show the correct table element?

I have JavaScript code which on button click shows its table. I have 4 buttons (and tables, obviously). Probably there will be more, so making function to each one of them will be bad idea. That being said, I made this code below to slightly minimize the amount of code. But, it doesn't work, and I don't quite understand why.
document.addEventListener('DOMContentLoaded', function() {
const tab1 = document.getElementById('tab1');
const tab2 = document.getElementById('tab2');
const tab3 = document.getElementById('tab3');
const tab4 = document.getElementById('tab4');
const currentTable = ".table";
const tables = Array.from(document.querySelectorAll(currentTable))
const table1 = document.querySelector('.table1');
const table2 = document.querySelector('.table2');
const table3 = document.querySelector('.table3');
const table4 = document.querySelector('.table4');
//this doesnt work
function showTable(e) {
const target = e.target;
if (!target || !target.matches(currentTable)) {
return;
}
tables.forEach(elem => elem.classList.remove('active'));
tables.forEach(elem => elem.classList.remove('op'));
e.target.classList.add('active');
setTimeout(function() {
e.target.classList.add('op');
}, 20);
};
tab1.addEventListener('click', showTable(table1));
tab2.addEventListener('click', showTable(table2));
tab3.addEventListener('click', showTable(table3));
tab4.addEventListener('click', showTable(table4));
});
//this one for buttons
document.addEventListener('DOMContentLoaded', function() {
const selector = '.table_option';
const elems = Array.from(document.querySelectorAll(selector));
const navigation = document.querySelector('.table-nav');
function makeActive(e) {
const target = e.target;
if (!target || !target.matches(selector)) {
return;
}
elems.forEach(elem => elem.classList.remove('active'));
e.target.classList.add('active');
};
navigation.addEventListener('click', makeActive);
});
.table_container {
display: flex;
width: 100%;
}
.table_content-left {
width: 30%;
margin-top: 50px;
}
.table_content-left .table_option {
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.table_content-left .table-nav li:not(:last-child) {
margin-bottom: 10px;
}
.table_content-left .table_option.active {
color: #eb5e28;
border-left: 2px solid #252422;
padding: 10px 15px;
transition: all 0.8s;
}
.table_content-right {
width: 70%;
}
.table {
display: none;
opacity: 0;
transition: opacity 900ms;
}
.op {
opacity: 1;
}
.table_title {
font-size: 24px;
font-weight: 700;
}
.table_content table {
border-collapse: collapse;
}
.table_content td,
.table_content th {
text-align: left;
padding: 8px;
width: 100%;
font-weight: 600;
}
.table_content td {
background-color: #ccc5b9;
}
.table_content th:first-child {
padding: 8px 0px;
}
.table_content td:nth-child(2n+1) {
background-color: #403d39;
color: #fff;
}
.table_content tr:nth-child(even) {
background-color: #ccc5b9;
color: #fff;
}
.table_content tr:nth-child(even) td:nth-child(1n+1) {
background-color: #403d39;
}
.table_content tr:nth-child(even) td:nth-child(2n+1) {
background-color: #ccc5b9;
color: #252422;
}
.active {
display: block;
}
<div class="table_container ">
<div class="table_content-left">
<ul role="list" class="table-nav">
<li><a class="table_option active" id="tab1">button1</a></li>
<li><a class="table_option" id="tab2">button2</a></li>
<li><a class="table_option" id="tab3">button3</a></li>
<li><a class="table_option" id="tab4">button4</a></li>
</ul>
</div>
<div class="table_content-right">
<div class="table table1 active op">
<div class="table_title">1</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table2 table">
<div class="table_title">2</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table3 table">
<div class="table_title">3</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table4 table">
<div class="table_title">4</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
</div>
</div>
Where am I wrong? Can someone point me to the problem I am facing?

I like to take a simple index-based approach to things like this. If that doesn't suit, you could add indices to the tables using data attributes which correspond to tab index.
Some other tips...
You were creating event listeners in every call of showTable(). That would result in a pile of event handlers you don't want.
You were using a rather roundabout way to collect elements (with Array.from(). That's not needed.
Multiple classes can be added and removed as a list.
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.table_option');
const tables = document.querySelectorAll('.table');
tabs.forEach(tab => {
tab.addEventListener('click', e => {
const tabEl = e.currentTarget.parentNode;
const tabIndex = [...tabEl.parentNode.children].indexOf(tabEl);
showTable(tabIndex);
});
});
const showTable = index => {
tables.forEach(elem => elem.classList.remove('active', 'op'));
tables[index].classList.add('active');
setTimeout(() => {
tables[index].classList.add('op');
}, 20);
tabs.forEach(elem => elem.classList.remove('active', 'op'));
tabs[index].classList.add('active');
}
});
.table_container {
display: flex;
width: 100%;
}
.table_content-left {
width: 30%;
margin-top: 50px;
}
.table_content-left .table_option {
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.table_content-left .table-nav li:not(:last-child) {
margin-bottom: 10px;
}
.table_content-left .table_option.active {
color: #eb5e28;
border-left: 2px solid #252422;
padding: 10px 15px;
transition: all 0.8s;
}
.table_content-right {
width: 70%;
}
.table {
display: none;
opacity: 0;
transition: opacity 900ms;
}
.op {
opacity: 1;
}
.table_title {
font-size: 24px;
font-weight: 700;
}
.table_content table {
border-collapse: collapse;
}
.table_content td,
.table_content th {
text-align: left;
padding: 8px;
width: 100%;
font-weight: 600;
}
.table_content td {
background-color: #ccc5b9;
}
.table_content th:first-child {
padding: 8px 0px;
}
.table_content td:nth-child(2n+1) {
background-color: #403d39;
color: #fff;
}
.table_content tr:nth-child(even) {
background-color: #ccc5b9;
color: #fff;
}
.table_content tr:nth-child(even) td:nth-child(1n+1) {
background-color: #403d39;
}
.table_content tr:nth-child(even) td:nth-child(2n+1) {
background-color: #ccc5b9;
color: #252422;
}
.active {
display: block;
}
<div class="table_container ">
<div class="table_content-left">
<ul role="list" class="table-nav">
<li><a class="table_option active" id="tab1">button1</a></li>
<li><a class="table_option" id="tab2">button2</a></li>
<li><a class="table_option" id="tab3">button3</a></li>
<li><a class="table_option" id="tab4">button4</a></li>
</ul>
</div>
<div class="table_content-right">
<div class="table table1 active op">
<div class="table_title">1</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table2 table">
<div class="table_title">2</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table3 table">
<div class="table_title">3</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table4 table">
<div class="table_title">4</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
</div>
</div>

How to select items using a input checkbox?

This is my code snippet, I want to display the difference of two selected columns and create a new table with columns selected and difference along as a column. I am not getting how can I select table columns with the help of checkbox (basically bind the checkbox with table columns). I cant find anything on Stack Overflow or any other site for the reference.
Edit: I have added the JS code for getting the column data corresponding to that particular header, right now I am hard coding it to header "Three". How can I pick the particular column data bind to the input checkbox clicked?
columnTh = $("table th:contains('Three')");
columnIndex = columnTh.index() + 1;
let arr = [];
alert(columnIndex)
arr = $('table tr td:nth-child(' + columnIndex + ')').text()
alert(arr)
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 6px;
}
td:first-child,
tr:first-child {
background-color: #003a6a !important;
color: white !important;
}
.table-scroll {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
overflow: auto;
}
.table-scroll table {
width: 100%;
min-width: 1280px;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-wrap {
position: relative;
}
.table-scroll tr:first-child {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
.table-scroll tfoot tr {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index: 4;
}
tr:first-child {
z-index: 5;
}
#media screen and (max-width: 500px) {
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
max-width: 140px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
<table id="main-table" class="main-table">
<tbody>
<tr>
<th>One</th>
<th>Two <input type="checkbox" id="c2" value="on" name="cb2"/></th>
<th>Three<input type="checkbox" id="c3" value="on" name="cb3"/></th>
<th>Four<input type="checkbox" id="c4" value="on" name="cb4"/></th>
<th>Five<input type="checkbox" id="c5" value="on" name="cb5"/></th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>21</td>
<td>2</td>
<td>93</td>
<td>74</td>
<td>85</td>
</tr>
<tr>
<td>21</td>
<td>32</td>
<td>93</td>
<td>24</td>
<td>15</td>
</tr>
<tr>
<td>91</td>
<td>72</td>
<td>13</td>
<td>14</td>
<td>85</td>
</tr>
<tr>
<td>411</td>
<td>422</td>
<td>423</td>
<td>144</td>
<td>145</td>
</tr>
<tr>
<td>151</td>
<td>522</td>
<td>93</td>
<td>54</td>
<td>515</td>
</tr>
<tr>
<td>610</td>
<td>621</td>
<td>363</td>
<td>464</td>
<td>65</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>13</td>
<td>41</td>
<td>5</td>
</tr>
<tr>
<td>11</td>
<td>120</td>
<td>143</td>
<td>214</td>
<td>5</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
</tr>
<tr>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
</tr>
</tbody>
</table>
</div>

I don't know how you want to display the difference, but this might get you started:
const table = document.getElementById("main-table"),
checkboxes = table.querySelectorAll('th > input[type="checkbox"]');
let columns = {};
for(let i = 0; i < checkboxes.length; i++)
{
checkboxes[i].addEventListener("input", onInput);
}
function onInput(e)
{
const input = e.target,
column = input.parentNode.cellIndex,
tds = table.querySelectorAll('td:nth-child(' + (column + 1) + ')');
if (input.checked)
{
let list = [];
for(let i = 0; i < tds.length; i++)
{
list[list.length] = tds[i].textContent;
}
columns[column] = list;
}
else
{
delete columns[column];
}
if (Object.keys(columns).length > 1)
showDifference();
else
table.classList.remove("result");
}
function showDifference()
{
table.classList.add("result");
let cells = table.getElementsByClassName("result"),
trs = table.querySelectorAll("tr");
if (!cells.length)
{
cells = [];
for(let i = 0, cell; i < trs.length; i++)
{
cell = document.createElement(i ? "td" : "th");
if (!i)
cell.textContent = "Results";
cell.className = "result";
cells[cells.length] = cell;
trs[i].appendChild(cell);
}
}
let dif = [];
for(let r in columns)
{
for(let i = 0; i < columns[r].length; i++)
{
if (dif[i] === undefined)
dif[i] = [];
dif[i][dif[i].length] = columns[r][i];
}
}
for(let i = 0; i < dif.length; i++)
{
cells[i+1].textContent = dif[i];
}
}
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 6px;
}
td:first-child,
tr:first-child {
background-color: #003a6a !important;
color: white !important;
}
.table-scroll {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
overflow: auto;
}
.table-scroll table {
width: 100%;
min-width: 1280px;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-wrap {
position: relative;
}
.table-scroll tr:first-child {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
.table-scroll tfoot tr {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index: 4;
}
tr:first-child {
z-index: 5;
}
#media screen and (max-width: 500px) {
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
max-width: 140px;
}
}
.main-table:not(.result) th.result,
.main-table:not(.result) td.result
{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
<table id="main-table" class="main-table">
<tbody>
<tr>
<th>One</th>
<th>Two <input type="checkbox" id="c2" value="on" name="cb2"/></th>
<th>Three<input type="checkbox" id="c3" value="on" name="cb3"/></th>
<th>Four<input type="checkbox" id="c4" value="on" name="cb4"/></th>
<th>Five<input type="checkbox" id="c5" value="on" name="cb5"/></th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>21</td>
<td>2</td>
<td>93</td>
<td>74</td>
<td>85</td>
</tr>
<tr>
<td>21</td>
<td>32</td>
<td>93</td>
<td>24</td>
<td>15</td>
</tr>
<tr>
<td>91</td>
<td>72</td>
<td>13</td>
<td>14</td>
<td>85</td>
</tr>
<tr>
<td>411</td>
<td>422</td>
<td>423</td>
<td>144</td>
<td>145</td>
</tr>
<tr>
<td>151</td>
<td>522</td>
<td>93</td>
<td>54</td>
<td>515</td>
</tr>
<tr>
<td>610</td>
<td>621</td>
<td>363</td>
<td>464</td>
<td>65</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>13</td>
<td>41</td>
<td>5</td>
</tr>
<tr>
<td>11</td>
<td>120</td>
<td>143</td>
<td>214</td>
<td>5</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
</tr>
<tr>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
</tr>
</tbody>
</table>
</div>

Popover menu in VueJS without JQuery?

In this answer is there exactly what I am looking for. A menu pops up, when clicking on a table row. The only problem is it uses JQuery...
So my question is, can the same be done without JQuery? Perhaps with VueJS, which I am using?

Translated the example
let rows = document.querySelectorAll("tr");
let btnPane = document.getElementById("button-pane");
document.active = '';
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
btnPane.addEventListener("mouseover", function() {
btnPane.style.display = "block";
if(document.active)
document.active.style.backgroundColor = "lightblue";
});
btnPane.addEventListener("mouseleave", function() {
btnPane.style.display = "none";
if(document.active)
document.active.style.backgroundColor = "";
});
rows.forEach(function(row) {
row.addEventListener("click", function(e) {
var posLeft = e.clientX + 10;
var posBottom = this.offsetTop + this.offsetHeight+8;
btnPane.style.top = posBottom + "px";
btnPane.style.left = posLeft + "px";
btnPane.style.display = "block";
document.active = this;
});
row.addEventListener("mouseleave", function() {
btnPane.style.display = "none";
});
});
table {
border-collapse: collapse;
}
th, td{
border-bottom: 1px solid #aaa;
}
#mytable tbody tr:hover {
background-color: lightblue;
}
.button-pane {
display: none;
position: absolute;
float: left;
top: 0px;
left: 0px;
background-color: lightblue;
width: 150px;
height: 30px;
padding: 0px;
text-align: center;
}
.button-pane button {
display: inline;
cursor: pointer;
}
<table id="mytable" border="1" width="100%">
<thead>
<tr>
<td>HEADER 1</td>
<td>HEADER 2</td>
<td>HEADER 3</td>
<td>HEADER 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>a</td>
<td>aa</td>
<td>aaa</td>
</tr>
<tr>
<td>Item 2</td>
<td>b</td>
<td>bb</td>
<td>bbb</td>
</tr>
<tr>
<td>Item 3</td>
<td>c</td>
<td>cc</td>
<td>ccc</td>
</tr>
</tbody>
</table>
<div id="button-pane" class="button-pane">
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
</div>
</div>

Javascript - Expand/Collapse table rows

Given the following table/code, I'd like to add two items. I don't know JavaScript well enough and this code was left by another programmer. The code works as expected in every other way.
Here are the two items:
The table should start in a collapsed state. All nodes should be
collapsed to the 'Grandparent' level.
There should be a link for 'expand all' and a separate 'collapse all' link.
Here is the table I'm using:
$(function() {
$('#mytable').on('click', '.toggle', function () {
var findChildren = function (tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function () {
return $(this).data('depth') <= depth;
}));
};
var el = $(this);
var tr = el.closest('tr');
var children = findChildren(tr);
var subnodes = children.filter('.expand');
subnodes.each(function () {
var subnode = $(this);
var subnodeChildren = findChildren(subnode);
children = children.not(subnodeChildren);
});
if (tr.hasClass('collapse')) {
tr.removeClass('collapse').addClass('expand');
children.hide();
} else {
tr.removeClass('expand').addClass('collapse');
children.show();
}
return children;
});
});
table td, th {
border: 1px solid #eee;
font-family: Arial;
font-size: 16px;
}
.level0 td:first-child {
padding-left: 5px;
}
.level1 td:first-child {
padding-left: 25px;
}
.level2 td:first-child {
padding-left: 50px;
}
.level3 td:first-child {
padding-left: 75px;
}
.collapse .toggle {
background: url("open.gif");
background-repeat: no-repeat;
}
.expand .toggle {
background: url("closed.gif");
background-repeat: no-repeat;
}
.toggle {
height: 20px;
width: 20px;
display: inline-block;
}
.age {
text-align: center;
}
.nam {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" style="border-collapse: collapse" cellpadding="6">
<thead>
<tr>
<th width="250px">Type</th>
<th width="50px">Age</th>
<th width="50px">Name</th>
</tr>
</thead>
<tr data-depth="0" class="collapse level0">
<td><span class="toggle collapse"></span>GRANDPARENT</td>
<td class="age">80</td>
<td class="nam">Ethel</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td><span class="toggle"></span>CHILD 1</td>
<td class="age">55</td>
<td class="nam">Susan</td>
</tr>
<tr data-depth="2" class="collapse level2">
<td><span class="toggle collapse"></span>GRANDCHILD 1</td>
<td class="age">32</td>
<td class="nam">Kristen</td>
</tr>
<tr data-depth="3" class="collapse collapsable level3">
<td>GREAT GRANCHILD 1</td>
<td class="age">12</td>
<td class="nam">Layla</td>
</tr>
<tr data-depth="1" class="collapse collapsable level1">
<td><span class="toggle collapse"></span>CHILD 2</td>
<td class="age">52</td>
<td class="nam">Joanne</td>
</tr>
<tr data-depth="2" class="collapse collapsable level2">
<td><img src="list.gif"/>GRANDCHILD 2</td>
<td class="age">28</td>
<td class="nam">Marie</td>
</tr>
</table>
What do I need to add to the JavaScript to accomplish this?

Is this the kind of result you want ?
(I played a little with your code to make it work more or less like I think it should.)
Anyway, I don't understand all about what has been done, and I propose you only a JS solution.
But… I think the classes in your trs could be modified to get your “all hidden” result at the loading of the page without using any JS.
I commented where I added the new things:
EDIT: And I cleaned a little the code, too.
$('.collapse').on('click', function() {
//console.log($(this).attr('data-depth'));
var findChildren = function(tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function() {
return $(this).data('depth') <= depth;
}));
};
var children = findChildren($(this));
if ($(children).is(':visible')) {
$(this).addClass("closed");
$(children).hide();
} else {
$(this).removeClass("closed");
$(children).show();
var children = findChildren($(".closed"));
$(children).hide();
}
});
// HERE IS THE CODE I ADDED
$('#show_all').on('click', function() {
$("#mytable tr.collapse").removeClass("closed").show();
});
$('#hide_all').on('click', function() {
$("#mytable tr.collapse:not([data-depth='0'])").hide();
$("#mytable tr.collapse.level0").addClass("closed");
});
$(document).ready(function() {
$('#hide_all').trigger('click');
});
table td,
th {
border: 1px solid #eee;
font-family: Arial;
font-size: 16px;
}
.level0 td:first-child {
padding-left: 10px;
}
.level1 td:first-child {
padding-left: 30px;
}
.level2 td:first-child {
padding-left: 50px;
}
.level3 td:first-child {
padding-left: 70px;
}
.age {
text-align: center;
}
.nam {
text-align: left;
}
.closed td:first-child::before {
content: "• ";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HERE IS THE HTML I ADDED FOR THE BUTTONS -->
<button id="show_all"><p>Show all</p></button>
<button id="hide_all"><p>Hide all</p></button>
<!-- END -->
<table id="mytable" style="border-collapse: collapse" cellpadding="6">
<thead>
<tr>
<th width="250px">Type</th>
<th width="50px">Age</th>
<th width="50px">Name</th>
</tr>
</thead>
<tr data-depth="0" class="collapse level0">
<td>GRANDPARENT</td>
<td class="age">80</td>
<td class="nam">Ethel</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td>CHILD 1</td>
<td class="age">55</td>
<td class="nam">Susan</td>
</tr>
<tr data-depth="2" class="collapse level2">
<td>GRANDCHILD 1</td>
<td class="age">32</td>
<td class="nam">Kristen</td>
</tr>
<tr data-depth="3" class="collapse level3">
<td>GREAT GRANCHILD 1</td>
<td class="age">12</td>
<td class="nam">Layla</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td>CHILD 2</td>
<td class="age">52</td>
<td class="nam">Joanne</td>
</tr>
<tr data-depth="2" class="collapse level2">
<td>GRANDCHILD 2</td>
<td class="age">28</td>
<td class="nam">Marie</td>
</tr>
</table>
And here is the snippet before my last edition, in case the “cleaned” one doesn't fit your needs:
$('.collapse').on('click', function() {
//console.log($(this).attr('data-depth'));
var findChildren = function(tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function() {
return $(this).data('depth') <= depth;
}));
};
var children = findChildren($(this));
if ($(children).is(':visible')) {
$(children).hide();
} else {
$(children).show();
}
});
// HERE IS THE CODE I ADDED
$('#show_all').on('click', function() {
$("#mytable tr.collapse:not([data-depth='0'])").show();
});
$('#hide_all').on('click', function() {
$("#mytable tr.collapse:not([data-depth='0'])").hide();
});
$(document).ready(function() {
$('#hide_all').trigger('click');
});
table td,
th {
border: 1px solid #eee;
font-family: Arial;
font-size: 16px;
}
.level0 td:first-child {
padding-left: 5px;
}
.level1 td:first-child {
padding-left: 25px;
}
.level2 td:first-child {
padding-left: 50px;
}
.level3 td:first-child {
padding-left: 75px;
}
.collapse .toggle {
background: url("open.gif");
background-repeat: no-repeat;
}
.expand .toggle {
background: url("closed.gif");
background-repeat: no-repeat;
}
.toggle {
height: 20px;
width: 20px;
display: inline-block;
}
.age {
text-align: center;
}
.nam {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HERE IS THE HTML I ADDED -->
<button id="show_all"><p>Show all</p></button>
<button id="hide_all"><p>Hide all</p></button>
<!-- END -->
<table id="mytable" style="border-collapse: collapse" cellpadding="6">
<thead>
<tr>
<th width="250px">Type</th>
<th width="50px">Age</th>
<th width="50px">Name</th>
</tr>
</thead>
<tr data-depth="0" class="collapse level0">
<td><span class="toggle collapse"></span>GRANDPARENT</td>
<td class="age">80</td>
<td class="nam">Ethel</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td><span class="toggle"></span>CHILD 1</td>
<td class="age">55</td>
<td class="nam">Susan</td>
</tr>
<tr data-depth="2" class="collapse level2">
<td><span class="toggle collapse"></span>GRANDCHILD 1</td>
<td class="age">32</td>
<td class="nam">Kristen</td>
</tr>
<tr data-depth="3" class="collapse collapsable level3">
<td>GREAT GRANCHILD 1</td>
<td class="age">12</td>
<td class="nam">Layla</td>
</tr>
<tr data-depth="1" class="collapse collapsable level1">
<td><span class="toggle collapse"></span>CHILD 2</td>
<td class="age">52</td>
<td class="nam">Joanne</td>
</tr>
<tr data-depth="2" class="collapse collapsable level2">
<td><img src="list.gif" />GRANDCHILD 2</td>
<td class="age">28</td>
<td class="nam">Marie</td>
</tr>
</table>

Toggle that reveal text one at a time by click

I have a problem with my code. The goal is to have a text that appear when a user click on the link. But I want also that when he clicks on the link the only text that show is the text underneath and not in all the cells. Can someone has a clue on what I did wrong? I will probable add other links (more than 2) and I want to be sure that it will work every time.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$('.cat' + $(this).attr('data-prod-cat')).toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>

You have just to go up to the parent table using closest('table') function and then select all the text's related to the current clicked .toggler using .find('[class^="cat"]') like :
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
Hope this helps.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td>
<a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>

Based on your code, I guess you are trying to use data-prod-cat attribute to know which block needs to appear.
But in both of your block you have data-prod-cat="1" which means that you will activate both blocks on every action.
Try changing the 2nd block attribute to :
data-prod-cat="2"
You'll also need to update the css class in your other <tr>

You need to get the parent of <a> first then get that parent which is <tr>. Finally filter on cat1 class to toggle all siblings containing the cat1 class.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).parent().parent().siblings().filter(".cat1").toggle();
});
});
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).parent().parent().siblings().filter(".cat1").toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>