JS-Accordion, не может (display="block") все остальные элементы панели.

[FreeDOM2]

Привет,

У меня есть следующий код из w3schools, открывающий закрывающийся список аккордеона (панель).
(CSS работает хорошо!!) Я хотел дополнить версию: когда я открываю панель, все остальные панели должны закрываться. Я пытался использовать второй цикл в , но это не сработало.
Какие-либо предложения? Большое спасибо!

 (function () { var acc = document.getElementsByClassName("accordion"); var i,j; 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"; } }); } })();

Код (JavaScript):

 

[Алексей Стоянов]

Предполагая, что вы не хотите, чтобы он был анимирован, это больше НЕ работа JavaScript. На входах есть атрибут :checked, который вы можете использовать для запуска аккордеонов. Если вы хотите открыть только один, используйте type="radio" с тем же именем.

.accordionMenu .toggle {

display:block;
position:absolute;
left:-999em;
}
.accordionMenu .toggle ~ label {

cursor:pointer;
}
.accordionMenu .toggle:checked ~ label {

background:#000;
color:#FFF;
}
.accordionMenu .toggle ~ ul {

position:absolute;
left:-999em;
top:-999em;
}
.accordionMenu .toggle:checked ~ ul {
position:static; 
}

Код (разметка):
<ul class="accordionMenu"> <li> <input type="radio" name="menuDepth1" id="toggle_section1" class="toggle" hidden> <label for="toggle_section1">Section 1</label> <ul> <li>Test1-1</li> <li>Test1-2</li> <li>Test1-3</li> <li>Test1-4</li> <li>Test1-5</li> <li>Test1-6</li> </ul> </li><li> <input type="radio" name="menuDepth1" id="toggle_section2" class="toggle" hidden> <label for="toggle_section2">Section 2</label> <ul> <li>Test2-1</li> <li>Test2-2</li> <li>Test2-3</li> <li>Test2-4</li> <li>Test2-5</li> <li>Test2-6</li> </ul> </li><li> <input type="radio" name="menuDepth1" id="toggle_section3" class="toggle" hidden> <label for="toggle_section3">Section 3</label> <ul> <li>Test3-1</li> <li>Test3-2</li> <li>Test3-3</li> <li>Test3-4</li> <li>Test3-5</li> <li>Test3-6</li> </ul> </li> </ul>
Код (разметка): БОЛЬШЕ НЕ РАБОТАЕТ ПО JAVASCRIPT!!!

Также помните, что если вам не нужно «только одно открытие», есть теги DETAILS и SUMMARY, которые также могут сделать это без JavaScript - и, что еще интереснее, можно сделать это и без помощи CSS.

 

[Йохан Грицкевич]

Здесь есть решение: https://stackoverflow.com/questions/36643811/css-toggle-accordion-panel