Как оживить отображение таблицы: нет / блокировать? [дублировать] ⇐ Html

[Anonymous]

Codepen: https://codepen.io/c3isr-everything-cyb ... en/azbeoek
То, что я пытаюсь сделать,-это немного анимации или переход Аккордеон. < /p>
Полный код: < /p>
html: < /p>

Код: Выделить всё

            var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}< /code>
       body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: White;
font-family: Sakkal Majalla;
direction: rtl;
position: relative;
z-index: -2;
-ms-overflow-style: none;

}
body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome */

li {
list-style: none;
}

a {
text-decoration: none;
}

.main{
display: grid;
grid-template-columns: 1fr;
justify-items: center;
margin-top: 2rem;
margin-bottom: 1rem;
}

table {
border: 1px solid #dededf;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 1px;
text-align: center;
}

th {
border: 1px solid #dededf;
background-color: #eceff1;
color: #000000;
padding: 5px;
}

td {
border: 1px solid #dededf;
background-color: #ffffff;
color: #000000;
padding: 5px;
}
th:nth-child(1) {
width: 30.9rem;
}

th:nth-child(2) {
width: 10rem;
}
th:nth-child(3) {
width: 7rem;
}

.accordion {
background-color: #ffffff;
color: black;
font-weight: bold;
cursor: pointer;
margin-top: 20px;
padding: 18px;
border: none;
text-align: right;
outline: none;
font-size: 20px;
transition: 0.4s;
width: 50rem;
border: 1px solid rgb(219, 219, 219);
border-radius: 8px;
box-shadow: rgba(100, 100, 111, 0.123) 0px 7px 29px 0px;
}

.active, .accordion:hover {
border-radius: 8px 8px 0px 0px;
border-color:  rgb(0, 128, 255);
}

.accordion span{
float: left;
font-size: 15px;
color: #116ce4;
}

.panel {
display: none;
overflow: hidden;
}< /code>
   

John Doe



company
department
2025?

COMPANY A
FINANCE
✅


COMPANY Z
PMO
❌




John Doe



company
department
2025?

company A
HR
❌


company B
HR
❌


company C
HR
❌




John Doe



company
department
2025?

company A
HR
✅

Подробнее здесь: https://stackoverflow.com/questions/795 ... none-block