Добрый день!
На сайте имеется около ста одинаковых блоков DIV в виде таблицы.
Необходимо, если есть блоки с одинаковыми классами, например:
<div class="tovar_sony">
<div>
<div>
<div>
<div><span class="collapsible"></span></div>
</div>
<div></div>
</div>
</div>
</div>
<div class="tovar_sony">
<div>
<div>
<div>
<div><span class="collapsible"></span></div>
</div>
<div></div>
</div>
</div>
</div>
<div class="tovar_sony">
<div>
<div>
<div>
<div><span class="collapsible"></span></div>
</div>
<div></div>
</div>
</div>
</div>
<div class="tovar_honor">
<div>
<div>
<div>
<div><span class="collapsible"></span></div>
</div>
<div></div>
</div>
</div>
</div>
сгруппировать блоки по одинаковым классам и скрыть все, кроме первых. В оставшемся блоке показывать кнопку показать, скрыть n элементов.
<div class="tovar_sony">
<div>
<div>
<div>
<div><span class="collapsible">Показать 2 элемента</span></div> <!-- Добавляется кнопка -->
</div>
<div></div>
</div>
</div>
</div>
<div class="tovar_honor">
<div>
<div>
<div>
<div><span class="collapsible"></span></div>
</div>
<div></div>
</div>
</div>
</div>
Возможно ли доработать этот код. Он показывает и скрывает блоки с классом content.
document.addEventListener("DOMContentLoaded", function() {
const on = (parent, event, selector, handler) =>
parent.addEventListener(event, ({target}) => {
if (target = target.closest(selector)) handler(target)
})
const fn = el => {
let parent = el.closest('.conteiner');
let content = parent.querySelector('.content');
content.style.setProperty('--maxH', `${content.scrollHeight}px`);
parent.classList.toggle('active');
}
on(document, "click", ".collapsible", fn);
});
Помогите пожалуйста.