<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table class="table toggle-arrow-tiny"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Job Title</th> <th>Job Title</th> <th>Job Title</th> </tr> </thead> <tbody> <tr base-trid="123"> <td>Isidra</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> </tr> <tr trid-show="123"> <td>Isidra</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> </tr> <tr> <td>Isidra</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> </tr> <tr> <td>Isidra</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> </tr> <tr> <td>Isidra</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> </tr> <tr> <td>Isidra</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> </tr> <tr> <td>Isidra</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> </tr> <tr> <td>Isidra</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> <td>Boudreaux</td> </tr> </tbody> </table> <script> function bindTrClick() { // ion-chevron-down const baseTrid = this.getAttribute("base-trid"); let iTab= this.firstElementChild.firstElementChild.firstElementChild; if (iTab.className ==="ion-chevron-down"){ iTab.className = "ion-chevron-right" }else{ iTab.className = "ion-chevron-down" } let showTrarry = this.parentNode.querySelectorAll('tr[trid-show="' + baseTrid + '"]'); for (let i = 0; i < showTrarry.length; i++) { showTrarry[i].style.display = showTrarry[i].style.display === "" ? "none" : ""; } } function iconInit() { let trArry = document.getElementsByTagName("tr"); for (let i = 0; i < trArry.length; i++) { let td = trArry[i].firstElementChild; if (!!trArry[i].getAttribute("base-trid")) { td.innerHTML = '<span style="margin-right: 2px"><i class="ion-chevron-right"></i></span>' + td.innerText; } else if (!!trArry[i].getAttribute("trid-show")) { td.innerHTML = '<span style="margin-right: 15px"></span>' + td.innerText; } } } const selectTrInit = () => { iconInit(); let trArry = document.querySelectorAll("tr[base-trid]"); for (let i=0; i<trArry.length;i++){ trArry[i].onclick= bindTrClick } }; window.onload = () => { selectTrInit() } </script> </body> </html>