Класс вешается не на тот элемент

Мой html код:

document.querySelector(".instruction").addEventListener("click", function(object) {
    const plus = object.target.closest('.decription-open');
    const description = $('.instruction-decription')
    if (plus) {
        plus.classList.toggle('decription-open-true');
        if(description.classList = plus.classList){
            description.classList.toggle('decription-true');
        }
    }
})
/**/
.about-service {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3F80FF;
}
.about-service-content {
    width: 1400px;
    padding-right: 30px;
    padding-left: 30px;
    justify-content: space-between;
    align-items: start;
    display: flex;
}
.about-service-content .basic-left h1 {
    width: 475px;
    font-family: AcherusFeral;
    font-style: normal;
    font-weight: 700;
    font-size: 65px;
    color: #FFFFFF;
}
.about-service-content .basic-left p {
    margin-top: 20px;
    width: 450px;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
}
.about-service-content .basic-left button {
    margin-top: 20px;
    padding-left: 70px !important;
    padding-right: 70px !important;
    padding: 18px;
    cursor: pointer;
    background: #EE9D23;
    font-family: AcherusFeral;
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    color: #FFFFFF;
    border: 0;
    border-radius: 10px;
}
.about-service-content .basic-right .instruction {
    list-style-type: none;
}
.about-service-content .basic-right .instruction h1 {
    font-family: AcherusFeral;
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    color: #FFFFFF;
}
.about-service-content .basic-right .instruction h1:nth-child(2) {
    margin-left: 10px;
    width: 400px;
}
.about-service-content .basic-right .instruction li span {
    align-items: start;
    justify-content: end;
    display: flex;
}
.about-service-content .basic-right .instruction li span:nth-child(2) {
    display: none;
}
.decription-true {
    width: max-content;
    margin-left: auto;
    margin-right: 30px;
    display: flex !important;
}
.about-service-content .basic-right .instruction li span a{
    transition: 0.2s;
    cursor: pointer;
    height: 30px;
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
}
.about-service-content .basic-right .instruction li span p{
    width: 400px;
    margin-top: 10px;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
}
.about-service-content .basic-right .instruction li {
    transition: 0.2s;
    margin-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #FFF;
}
.about-service-content .basic-right .instruction li:first-child {
    margin-top: 0px;
}
.decription-open-true {
    rotate: 135deg;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="about-service">
        <div class="about-service-content">
            <div class="basic-left">
                <h1>Как работает сервис?</h1>
                <p>Легко, максимально прост и удобен в использование!</p>
                <button>Мои заметки</button>
            </div>
            <div class="basic-right">
                <ul class="instruction">
                    <li>
                        <span>
                            <h1>1.</h1>
                            <h1>Войдите в аккаунт или создайте его</h1>
                            <a class="decription-open decription-one">
                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="#10F09F"/>
                                </svg>
                            </a>                              
                        </span>
                        <span class="instruction-decription decription-one">
                            <p>Чтобы воспользоваться сервисом Вам нужно зарегистрировать аккаунт, если у вас его еще нет.</p>
                        </span>
                    </li>
                    <li>
                        <span>
                            <h1>2.</h1>
                            <h1>Перейдите в раздел с заметками</h1>
                            <a class="decription-open decription-two">
                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="#10F09F"/>
                                </svg>
                            </a>                              
                        </span>
                        <span class="instruction-decription decription-two">
                            <p>Войдите в личный кабинет и нажмите на кнопку "Мои заметки"</p>
                        </span>
                    </li>
                    <li>
                        <span>
                            <h1>3.</h1>
                            <h1>Отредактируйте заметку если потребуется</h1>
                            <a class="decription-open decription-three">
                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="#10F09F"/>
                                </svg>
                            </a>                              
                        </span>
                        <span class="instruction-decription decription-three">
                            <p>С каждой созданной заметкой можно работать отдельно, изменяйте ее или выделяйте среди остальных!</p>
                        </span>
                    </li>
                </ul>  
            </div>
        </div>
    </div>

Проблема в том что класс который должен вешаться на span с классом 'instruction-decription' Вешается на гиперссылку


Ответы (1 шт):

Автор решения: ksa

Проблема в том что класс который должен вешаться на span с классом 'instruction-decription' Вешается на гиперссылку

Такой эффект хотел получить? Чтобы текст показывался и скрывался?

document.querySelector(".instruction").addEventListener("click", function(object) {
  const plus = object.target.closest('.decription-open');
  if (!plus) return
  const description = plus.closest('li').querySelector('.instruction-decription')
  plus.classList.toggle('decription-open-true');
  description.classList.toggle('decription-true');
})
/**/

.about-service {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3F80FF;
}

.about-service-content {
  width: 1400px;
  padding-right: 30px;
  padding-left: 30px;
  justify-content: space-between;
  align-items: start;
  display: flex;
}

.about-service-content .basic-left h1 {
  width: 475px;
  font-family: AcherusFeral;
  font-style: normal;
  font-weight: 700;
  font-size: 65px;
  color: #FFFFFF;
}

.about-service-content .basic-left p {
  margin-top: 20px;
  width: 450px;
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  color: #FFFFFF;
}

.about-service-content .basic-left button {
  margin-top: 20px;
  padding-left: 70px !important;
  padding-right: 70px !important;
  padding: 18px;
  cursor: pointer;
  background: #EE9D23;
  font-family: AcherusFeral;
  font-style: normal;
  font-weight: 400;
  font-size: 25px;
  color: #FFFFFF;
  border: 0;
  border-radius: 10px;
}

.about-service-content .basic-right .instruction {
  list-style-type: none;
}

.about-service-content .basic-right .instruction h1 {
  font-family: AcherusFeral;
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  color: #FFFFFF;
}

.about-service-content .basic-right .instruction h1:nth-child(2) {
  margin-left: 10px;
  width: 400px;
}

.about-service-content .basic-right .instruction li span {
  align-items: start;
  justify-content: end;
  display: flex;
}

.about-service-content .basic-right .instruction li span:nth-child(2) {
  display: none;
}

.decription-true {
  width: max-content;
  margin-left: auto;
  margin-right: 30px;
  display: flex !important;
}

.about-service-content .basic-right .instruction li span a {
  transition: 0.2s;
  cursor: pointer;
  height: 30px;
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
}

.about-service-content .basic-right .instruction li span p {
  width: 400px;
  margin-top: 10px;
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  color: #FFFFFF;
}

.about-service-content .basic-right .instruction li {
  transition: 0.2s;
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #FFF;
}

.about-service-content .basic-right .instruction li:first-child {
  margin-top: 0px;
}

.decription-open-true {
  rotate: 135deg;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="about-service">
        <div class="about-service-content">
            <div class="basic-left">
                <h1>Как работает сервис?</h1>
                <p>Легко, максимально прост и удобен в использование!</p>
                <button>Мои заметки</button>
            </div>
            <div class="basic-right">
                <ul class="instruction">
                    <li>
                        <span>
                            <h1>1.</h1>
                            <h1>Войдите в аккаунт или создайте его</h1>
                            <a class="decription-open decription-one">
                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="#10F09F"/>
                                </svg>
                            </a>                              
                        </span>
                        <span class="instruction-decription decription-one">
                            <p>Чтобы воспользоваться сервисом Вам нужно зарегистрировать аккаунт, если у вас его еще нет.</p>
                        </span>
                    </li>
                    <li>
                        <span>
                            <h1>2.</h1>
                            <h1>Перейдите в раздел с заметками</h1>
                            <a class="decription-open decription-two">
                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="#10F09F"/>
                                </svg>
                            </a>                              
                        </span>
                        <span class="instruction-decription decription-two">
                            <p>Войдите в личный кабинет и нажмите на кнопку "Мои заметки"</p>
                        </span>
                    </li>
                    <li>
                        <span>
                            <h1>3.</h1>
                            <h1>Отредактируйте заметку если потребуется</h1>
                            <a class="decription-open decription-three">
                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="#10F09F"/>
                                </svg>
                            </a>                              
                        </span>
                        <span class="instruction-decription decription-three">
                            <p>С каждой созданной заметкой можно работать отдельно, изменяйте ее или выделяйте среди остальных!</p>
                        </span>
                    </li>
                </ul>  
            </div>
        </div>
    </div>

→ Ссылка