Почему мой выпадающий аккордеон не работает?

Question

Попытка заставить простой выпадающий аккордеон работать, но не уверен, почему он не падает при нажатии. Хотелось бы, чтобы кнопка «Свернуть все» переключалась на «Открыть» при переключении (но не обязательно). Открыта и идея чистого аккордеона css. Довольно плохо знаком с javascript и JQuery, поэтому любая информация полезна для этого. ТИА.

<div class="accordion">
    <div class="chapters___2NT4M js-chapters">
        <section id="table-of-contents" class="table_of_contents___2HR-W accordion">
            <header class="table_of_contents__chapter_title___2W8SV">
                <h2 class="table_of_contents__chapter_heading___19HQO" tabindex="0">Navigate to..</h2>
                <button class="table_of_contents__toggle_all___fVHqW accordion-header" aria-expanded="true" aria-pressed="true" aria-haspopup="true">Collapse all</button>
            </header>
            <div class="accordion-content">
            <ul class="table_of_contents__chapter_list___2gu-a" data-gtm-element="review_toc_list">
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#zener-diodes" data-gtm-element="review_toc_link">Zener Diodes</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#bridge-rectifiers" data-gtm-element="review_toc_link">Bridge Rectifiers</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#schottky-barrier-rectifiers" data-gtm-element="review_toc_link">Schottky Barrier Rectifiers</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#super-fast-recovery-rectifiers" data-gtm-element="review_toc_link">Super Fast Recovery Rectifiers</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#medium-power-bipolar-transistors" data-gtm-element="review_toc_link">Medium Power Bipolar Transistors</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#transient-protection" data-gtm-element="review_toc_link">Transient Protection</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#thyristor-modules" data-gtm-element="review_toc_link">thyristor Modules</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#obsoleted-eol-products" data-gtm-element="review_toc_link">Obsoleted/EOL Products</a></li>
                <li class="table_of_contents__chapter_list_heading___3_laf"><a href="#cross-reference" data-gtm-element="review_toc_link">Cross Reference</a></li>
            </ul>
            </div>
        </section>
    </div>
    </div>

CSS

.accordion-content {
    display: none;
    border-bottom: 1px solid #DDE0E7;
    background: #F6F7F9;
    padding: 1.5rem;
    color: #4a5666;
}

.accordion-header::before {
    content: '';
    vertical-align: middle;
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background-color: #B1B5BE;
    margin-right: .75rem;
}

.accordion-content.active {
    display: block;
    height: 200px;
}

@media (min-width: 80em) {
.chapters___2NT4M {
max-width: 570px;
}
}

.chapters___2NT4M {
clear: both;
margin-left: auto;
margin-right: auto
}

@media (min-width: 30em) {
.table_of_contents___2HR-W {
margin: 2em 0 0;
}
}

.table_of_contents___2HR-W {
border-top: 3px solid #000;
margin: 5em 0 0;
padding-top: 0;
}

article, aside, footer, header, nav, section {
display: block;
}

@media (min-width: 48em) {
.table_of_contents__chapter_title___2W8SV {
padding: 0;
}
}

.table_of_contents__chapter_title___2W8SV {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 1.5rem;
line-height: 1.5rem;
padding: .4em 0 1.2em;
}

@media (min-width: 80em) {
.table_of_contents__chapter_list___2gu-a {
margin-bottom: 57px;
}
}
@media (min-width: 48em) {
.table_of_contents__chapter_list___2gu-a {
display: block;
}
}

.table_of_contents__chapter_list___2gu-a {
display: ;
margin: 0 0 52px;
padding: 0;
list-style: none;
border-top: 0;
}

ol, ul {
margin: 0 0 1em 1.2em;
padding: 0;
}

@media (min-width: 48em) {
.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf {
font-size: 1.125rem;
line-height: 1.25rem;
}
}

.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf {
font-size: 1.1875rem;
line-height: 1.4375rem;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
margin-bottom: .8em;
}


.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf a, .d235 a {
color: #000;
}

.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf a {
color: #222;
text-decoration: none;
}

.table_of_contents__chapter_list___2gu-a  .table_of_contents__chapter_list_heading___3_laf a:hover {
color: #000;
border-bottom: 1px solid #000;
}

JS

$(document).ready();
$(".accordion").on("click", ".accordion-header", function() {
$(this).toggleClass("active").next().slideToggle();
});

Answer 1

Здесь есть несколько проблем, но я бы начал с JS.Здесь важно то, что внутри вашей функции клика this будет ссылка на элемент, на который был нажат.Итак, пока я читаю, вы переключаете активный класс на самой кнопке.

Кроме того, я полагаю, что вы намеревались использовать document.ready() в качестве контекста выполнения кода аккордеона.

$(document).ready(function() {
  $(".accordion").on("click", ".accordion-header", function() {
    $(".accordion-content").toggleClass("active");
  });
});

У меня нет скольжения в этом фрагменте, но, надеюсь, это связывает ваш щелчок с изменением CSS, которое показывает / скрывает содержание аккордеона.

Answer 2

Вы можете получить что-то похожее на аккордеон, не используя javascript, используя элемент html details.

<details>
    <summary>Title</summary>
    Some text
</details>

Затем, когда вы нажимаете на заголовок, он расширяется сам.Не требуется JS

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details