Загадочная проблема с переключением классов jQuery ⇐ Jquery

[Anonymous]

Здесь есть симпатичный маленький аккордеон, который использует заголовки для развертывания и свертывания содержимого ниже. Все работает так, как я хочу, за исключением одного: когда вы разворачиваете раздел, щелкнув заголовок, вы сможете снова щелкнуть заголовок, чтобы свернуть его. Что не так с этой картинкой?

$(document).ready(function(){

$(".haccordion > :header").addClass("h-trigger static").next().addClass("section collapsed").attr("inert","");

document.querySelectorAll('.h-trigger').forEach(el => {
el.setAttribute("tabindex", "0");
el.addEventListener("keydown", e => {
if ([" ", "Enter", "ArrowDown"].includes(e.key)) {
e.target.click();
}
});
});
$(".h-trigger.static").click(function(){
$(this).closest(".haccordion").find(".h-trigger.active").removeClass("active").addClass("static");
$(this).closest(".haccordion").find(".section.expanded").removeClass("expanded").addClass("collapsed").attr("inert","");
$(this).removeClass("static").addClass("active");
$(this).next(".section.collapsed").removeClass("collapsed").addClass("expanded").removeAttr("inert","");
});

$(".h-trigger.active").click(function(){
$(this).removeClass("active").addClass("static");
$(this).next(".section.expanded").removeClass("expanded").addClass("collapsed").attr("inert","");
});
});



Section with a paragraph
Here is some text content
Section with a div

Heading
Here is some content with text and an image
Test link

Section with a list

• List item 1
• List item 2

Подробнее здесь: https://stackoverflow.com/questions/787 ... ses-jquery