Почему при обращении к классу active, ничего не происходит?

Question

[Patris546]

Необходимо из плюса сделать минус при клике. Пытаюсь реализовать с помощью transform: rotate(0deg), для вертикальной палочки, при активном классе, но ничего не получается. В чем ошибка? Может есть другие способы из плюса сделать минус?

<div class="accordion__container">
            <div class="accordion__inner">
                <ul class="program__accordeon">
                    <li class="program__box">
                        <a class="program__link" href="#">
                            <div class="program__head">
                                <span>Lesson 1.</span>
                                <p>Aliquet lectus urna viverra in odio.</p>
                            </div>
                        </a>
                        <blockquote class="box">Nulla amet, sagittis potenti rhoncus sit. Elit lectus nec pulvinar aliquet donec enim, ornare. Lacus facilisi curabitur turpis varius mauris. Nisi, tempus risus, odio mi suscipit sed. Curabitur faucibus porttitor quis sem lacus, arcu feugiat facilisis. Commodo nunc orci vitae accumsan id.</blockquote>
                    </li>
                    <li class="program__box">
                        <a class="program__link " href="#">
                            <span>Lesson 2.</span>
                            <p>Orci commodo, viverra orci mollis ut euismod.</p>
                        </a>
                        <blockquote class="box">Nulla amet, sagittis potenti rhoncus sit. Elit lectus nec pulvinar aliquet donec enim, ornare. Lacus facilisi curabitur turpis varius mauris. Nisi, tempus risus, odio mi suscipit sed. Curabitur faucibus porttitor quis sem lacus, arcu feugiat facilisis. Commodo nunc orci vitae accumsan id.</blockquote>
                    </li>
                    <li class="program__box">
                        <a class="program__link" href="#">
                            <span>Lesson 3.</span>
                            <p>Sagittis vitae facilisi rutrum amet mauris quisque vel.</p>
                        </a>
                        <blockquote class="box">Nulla amet, sagittis potenti rhoncus sit. Elit lectus nec pulvinar aliquet donec enim, ornare. Lacus facilisi curabitur turpis varius mauris. Nisi, tempus risus, odio mi suscipit sed. Curabitur faucibus porttitor quis sem lacus, arcu feugiat facilisis. Commodo nunc orci vitae accumsan id.</blockquote>
                    </li>
                </ul>    
            </div>
        </div>

.accordion__container{
    width: 1230px;
    margin: 0 auto;
}
.program__accordeon{
    margin: 60px 
}

.program__box{
    position: relative;
}
.program__link{
    display: block;
    margin-bottom: 10px;
}

.program__link::before,
.program__link::after{
    content: '';
    position: absolute;
    top: 30%;
    left: -7%;
    right: 0;
    bottom: 0;
    background-color: rgb(255, 63, 58);
    border-radius: 2px;
    width: 20px;
    height: 2px;
}  
.program__link::after{
    transform: rotate(90deg);
}
.program__link .active ::after{
    transform: rotate(0deg);
}

.program__link span{
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0;
    color: rgb(255, 63, 58);
    margin-right: 8px;
}
.program__link p{
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0;
    color: rgb(30, 33, 44);
}
.box{
    font-weight: 400;
    letter-spacing: 0;
    color: rgb(66, 69, 81);
    display: none;
}

.accordion__container{
    width: 1230px;
    margin: 0 auto;
}
.program__accordeon{
    margin: 60px 
}

$(document).ready(function(){
    $('.program__link').on("click", function(){
      $(this).next('.box').slideToggle();
      $(this).toggleClass('active');
    });
  })

Answer 1

[szQocks]

проблема в том что внутри .program__link , нет элемента с классом .active

и там ещё опечатка где между классом и after

.program__link .active ::after

оставь просто .active::after в css

Comments

[Patris546]

Большое спасибо)

[szQocks]

Patris546, просто эта запись .program__link .active - так ты обращаешься к элементу с классом .active который находиться внутри .program__link, ну думаю ты понял)