Accordion JavaScript

@S1mblch · Регистрация: 09.10.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Подскажите пожалуйста, как классу .accordion-item добавить класс активности, чтобы менялся background? Получается, либо у всех сразу, либо только у первого (querySelectorAll querySelector). Не понимаю, как сделать добавить .accordion-item.active, только для того элемента, по которому кликнул. Причем, кликаю я по accordion-item-header, а background, должен изменится у .accordion-item.
Хочу, чтобы раскрытый элемент полностью менял background.
Только познаю js/html/css)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-item-header">Test1</div>
        <div class="accordion-item-body">
            <div class="accordion-item-body-content">
                Lorem Ipsum
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-item-header">Test2</div>
        <div class="accordion-item-body">
            <div class="accordion-item-body-content">
                Lorem Ipsum
            </div>
        </div>
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.accordion {
    border: 1px solid #E3E1D5;
    border-radius: 20px;  
    padding: 40px 40px 30px 40px;    
    height: 100%;
    &-item {
        width: 250px;
        min-height: 50px;
        padding: 16px 40px;
        background: #EDF2EC;
        border-radius: 20px;
        &:not(:first-child) {
            margin-top: 32px;
        }
        // &.active {
        //     background: #D6E7D2;
        // }
        &-header {
            position: relative;
            cursor: pointer;
            &::after {
                content: '+';
                position: absolute;
                right: 0;
            }
            &.active {
                &::after {
                    content: '-';
                }
            }
  
        } 
        &-body {
            max-height: 0;
            overflow: hidden;
            &.active {
                max-height: 400px;
            }
            &-content {
                margin-top: 12px;
                border-top: 0.5px solid #AEA1A1;
            }
        }
    }
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
document.querySelectorAll('.accordion-item-header').forEach((accordionItemHeader) => {  //получаю все header на которые буду нажимать
    accordionItemHeader.addEventListener('click', () => {
        accordionItemHeader.classList.toggle('active'); //добавляю класс активности для header + <-> -
        const accordionItemBody = accordionItemHeader.nextElementSibling; //получаю следующий элемент за header
        if(accordionItemHeader.classList.contains('active')) {    
            //если у header есть класс активности, тогда выставляем max-height
            accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + 'px';
        }
        else {
            accordionItemBody.style.maxHeight = 0;
        }
    });
});

Новые блоги и статьи Все статьи Все блоги /
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .