Как сделать чтобы класс «active» присваивался только элементу по которому кликнули?

Question

[Максим js]

Подскажите как решить проблему! Есть аккордеон с заголовком, в заголовке есть span который меняется при клике с плюса на минус, сам аккордеон раскрывается при клике на этот заголовок. Проблема в том, что не могу найти решение как сменять иконку на минус и плюс только активному аккордеону, они у меня меняются одновременно в открытом и не открытом. пробовал (this) не работает.

html

<div class="slide-body__button">
    <h4 class="slide-body__title">Требования</h4>
    <div class="slide-body-icon">
        <span class="slide-body-icon__item"></span>
    </div>
</div>
<div class="slide-body-panel">
    <p class="slide-body__description">Организация связи удаленных объектов — оценка местности, подбор оборудования, составление плана-схемы размещения антенного поста и оборудования.</p>
    <p class="slide-body__description">Ввод в эксплуатацию систем связи удаленных объектов – монтаж, подключение и настройка спутниковых антенн, усилителей сотовой связи, радиолиний и пр.</p>
    <p class="slide-body__description">Тестирование оборудования, отработка режимов работы, контроль проектных параметров работы оборудования радиосвязи.</p>
    <p class="slide-body__description">Обслуживание объектов связи — перенастройка, перевоз, мониторинг, оптимизация.</p>
</div>

css

&__button {
        padding: 15px 0;
        width: 100%;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom:  1px solid #DAE2E7;
        transition: 0.4s;
        &:hover {
            border-bottom:  1px solid #394D56;
        }
    }
    &-panel {
        padding: 15px 0;
        display: none;
        border-bottom:  1px solid #DAE2E7;
    }
    &-panel.active {
        display: block;
        height: auto;
        transition: 1s;
    }
    &__title {
        font-family: Inter;
        font-style: normal;
        font-weight: bold;
        font-size: 24px;
        line-height: 120%;
        color: #394D56;
        margin-bottom: 15px;
    }
    &-icon {
        position: relative;
        width: 30px;
        height: 30px;
        &__item {
            background-color: #394D56;
            position: absolute;
            left: 0;
            width: 14px;
            height: 4px;
            top: 6px;
            transition: 0.3s ease;
            &:after {
                content: '';
                background-color: #394D56;
                position: absolute;
                left: 5px;
                height: 14px;
                width: 4px;
                top: -5px;
                transition: 0.3s ease;
            }
            &.active:after {
                transform: rotate(-90deg);
            }
        }

jquery

$(document).ready(function () {
    $('.slide-body__button').on('click', function () {
        $(this).toggleClass('active');
        $(this).next().slideToggle(300);
        $('.slide-body-icon__item').toggleClass('active');
    });
});

пример https://codepen.io/kireevmaxim/pen/JjXdjom

Comments

[Ankhena]

$('.slide-body-icon__item').toggleClass('active');
Этим вы меняете класс всем, а не активному. Перепишите через this.

Или еще проще, меняйте через css
.active .slide-body-icon__item {}

p.s. кнопки это button, а не спан.
а если это украшение, то и вовсе псевдоэлемент
.active::after {}

[Максим js]

Pardon Me! Where Do I Find 4giveness?, https://codepen.io/kireevmaxim/pen/JjXdjom

[Максим js]

Ankhena, можете пожалуйста показать ? https://codepen.io/kireevmaxim/pen/JjXdjom

[Ankhena]

Максим js, .active .slide-body-icon__item:after {}
вместо &.active:after{}

Answer 1

[Vladislav]

Через this

Comments

[Максим js]

можете показать ? https://codepen.io/kireevmaxim/pen/JjXdjom