Как сделать оптимизированный аккордеон?

Question

[Dobby_Narko]

Есть меню аккордеон. Но бывает при нажатие функция не срабатывает и стрелочка не переворачивается, или бывает не с первого раза раскрывается. Как оптимизировать код ? В чём вообще проблема ?
Прикладываю фотографию проблемы и сам код JS.

let el = document.getElementsByClassName('menu_item'); 
let down = document.getElementsByClassName('down')  //стрелочки
let isMenuShow = true;

console.log(el)
for(var i=0; i < el.length; i++) {
   el[i].addEventListener("click", showSub);  // открытие аккордеона 
   down[i].addEventListener("click", show)   //при нажатии стрелочки переворачиваются 
}
function show(d) {
    this.classList.toggle("open");  

}

function showSub(e) {
    if(isMenuShow) {
        this.children[1].style.height = "auto";
        this.children[1].style.overflow = "visible";
        this.children[1].style.opacity = "1";
        isMenuShow = false;
    }else {
        this.children[1].style.height = "0px";
       this.children[1].style.overflow = "hidden";
       this.children[1].style.opacity = "0";
        isMenuShow = true;
    }
}

.open{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

Answer 1

[pLavrenov]

Весь функционал js части аккордиона сводится к тому чтобы установить или удалить css класс на родительском блоке в котором заголовок и контент. Все остальные лишнее и делается через css.

<div class="accordion">
    <div class="accordion-item toggle-this-class">
        <div class="header">Название</div>
        <div class="content">Текст</div>
    </div>
    <div class="accordion-item">
        <div class="header">Название</div>
        <div class="content">Текст</div>
    </div>
</div>