onclick get button show/hide next rows between the clicked button and next button.
How to display these rows as hidden first and after that i can switch between show and hide them. if it is possible with vanilla JavaScript and CSS.
table,
th,
td {
border: 1px solid black;
}<table>
<tr>
<td><button>show/hide</button> A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><button>show/hide</button> AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><button>show/hide</button> AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
</table>The key here to achieve what you want is to use .nextUntil("tr:has(button)")
as in:
$('table button').click(function() {
var n = $(this).closest("tr").nextUntil("tr:has(button)");
n.toggle()
})
Demo
$('table button').click(function() {
var n = $(this).closest("tr").nextUntil("tr:has(button)");
n.toggle()
}) table,
th,
td {
border: 1px solid black;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><button>show/hide</button> A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><button>show/hide</button> AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><button>show/hide</button> AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
</table>With vanilla javascript you can utilise the indexOf method to find where the table-row element containing the clicked button is and then iterating over N rows after and toggling the display state.
document.querySelectorAll('button').forEach(bttn=>bttn.addEventListener('click',function(e){
/* create an array from the nodelist so that `indexOf` can be used */
let col=[...document.querySelectorAll('tr')];
/* find the parent table row of the invoking button */
let tr=this.parentNode.parentNode;
/* find which table row in the array was the event source */
let index=col.indexOf( tr ) + 1;
/* process the next N records/rows */
for( let i=index; i < index + 2; i++ ){
col[i].style.display=col[i].style.display=='table-row' || col[i].style.display=='' ? 'none' : 'table-row'
}
}))table, th, td {
border: 1px solid black;
}
tr{display:table-row}<table>
<tr>
<td><button>show/hide</button> A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><button>show/hide</button> AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><button>show/hide</button> AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
</table>