Не могу нигде найти описание решения вроде простой задачи. Есть блок - это глава текста. В нём заголовок с классом step-name и несколько подразделов с классом step-part. Всего таких блоков неограниченное число. При щелчке на заголовке подразделы должны скрываться, при повторном опять открываться. Обычный раскрывающийся список (или аккордеон). Как это сделать? При щелчке на заголовке вызывается функция, которая скрывает подразделы. Но как передать в функцию, подразделы какого именно блока надо скрывать? (То есть на каком заголовке был клик). Каждому подразделу присваивать уникальный id? Как тогда передать в функцию, какой именно id надо скрывать на этот раз? Может есть механизм определить какой именно подраздел связан с тем заголовком, на котором кликнули (подраздел как дочерний элемент заголовка) и скрывать именно его? Не писать же отдельную функцию для каждого блока? Или есть какие-то другие механизмы?
Можно навесить событие на сам блок, который содержит заголовок и подразделы:
function hide(event) {
/*
Здесь можем проверить был ли вызван клик на заголовке
event.target - содержит в себе ссылку на элемент где было вызвано событие
*/
event.stopPropagation(); //остановим всплытие события
if (event.target.classList.contains("step-name")) //было ли вызвано событие на заголовке
{
/* Если подразделы идут сразу после заголовка, то можно просто пробежаться по соседям идущим после заголовка */
let pointer = event.target.nextElementSibling;
while(pointer) {
pointer.classList.toggle('.hide')
pointer = pointer.nextElementSibling;
}
}
}
Правда куда удобнее будет обернуть все подразделы в один блок и уже к нему добавлять css класс, который скроет все что внутри.
Простой
