Как переключаться между значками «плюс-минус» для аккордеона

Я пытаюсь взять значок «Плюс» для своего аккордеона и переключить его на значок «Минус» при нажатии с помощью Javascript, а затем вернуться к «Плюсу» при повторном нажатии. Кто-нибудь может помочь?

`

<div class = "faqs-container">


        
        <div class = "faqs-question">


            <button>
                <h3>Which services do you provide?</h3>
                <i class = "bi bi-plus"></i>

            </button>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. </p>


            
        </div>
</div>

`

`

.faqs-container {

    max-width: 90%;
    margin: 0 auto;

}



.faqs-question {
    width: 100%;
    border: 2px solid #999;
    border-radius: 4px;
    margin-bottom: 25px;

}

.faqs-container:hover{
    color: #999;
}


.faqs-question button{
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
    border: none;
    outline: none;
    font-size: 24px;
    font-family: 'interstate', sans-serif;
    font-weight: 500;
    color: #300600;
    cursor: pointer;
    transition: 0.6s ease-in-out;
}




.faqs-question button h3{
    font-size: 28px;
    font-family: 'interstate', sans-serif;
    font-weight: 500;
    transition: 0.2s ease-in-out;
    padding: 10px;
}

.faqs-question button h3:hover{
    color: #999;
    transition: 0.2s ease-in-out;
}


.faqs-question i{

    font-size: 48px;
    transition: 0.5s ease-in-out;
}

.faqs-question i:hover{
    color: #999;
    transition: 0.2s ease-in-out;
}

.faqs-question p {
    margin-top: 10px;
    font-size: 24px;
    font-family: 'Merriweather-Sans', sans-serif;
    font-weight: 300;
    line-height: 55px;
    color: #444;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: 0.6s ease;
}





.faqs-question p.show{
    max-height: 45vh;
    opacity: 1;
    padding: 10px 0px 40px 15px;
    padding-right: 40px;
    padding-left: 20px;
    margin-bottom: 35px;
}

`

`

<script>
    
 const buttons = document.querySelectorAll('button');

buttons.forEach( button =>{
    button.addEventListener('click',()=>{

          const faq = button.nextElementSibling;
            faq.classList.toggle('show');
            
         
    })
} )


</script>

`

Я не знаю, с чего начать. Хотя я понял, как показать ответ аккордеона по клику, я не уверен, как переключить значок «Минус»..

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
88
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я также хочу, чтобы вы помнили, что в HTML встроены аккордеоны, где js почти не нужен --> Резюме HTML. Используйте то, что лучше всего подходит для этой цели.

Так или иначе. Я просто выбрал «каждый» значок плюса, поэтому получил «массив/список узлов» этих значков. Я добавил индекс в цикл forEach, чтобы точно знать, на какой кнопке я нахожусь. Теперь, если у вас одинаковое количество кнопок и значков на странице, индекс каждый раз идеально соответствует значкам. После этого пришло время изменить значок плюса при нажатии кнопки. Либо добавление и удаление классов, либо что-то еще. Вы можете попробовать что-то вроде этого:

const buttons = document.querySelectorAll("button");
// cosnst icons = document.querySelctorAll('.bi-plus');

buttons.forEach((button, index) => {
  //adding index gives me the index of the current button
  button.addEventListener("click", () => {
    const faq = button.nextElementSibling;
    faq.classList.toggle("show");

    if (
      document.querySelector(".bi-plus").innerHTML ==
      "-" /*icons[index].classList.contains('bi-plus')  */
    ) {
      document.querySelector(".bi-plus").innerHTML = "+";
      //icons[index].classList.add('bi-minus');
      //icons[index].classList.remove('bi-plus');
    } else if (
      document.querySelector(".bi-plus").innerHTML ==
      "+" /*icons[index].classList.contains('bi-minus')  */
    ) {
      document.querySelector(".bi-plus").innerHTML = "-";
      //icons[index].classList.remove('bi-minus');
      //icons[index].classList.add('bi-plus');
    }
  });
});
.faqs-container {
  max-width: 90%;
  margin: 0 auto;
}

.faqs-question {
  width: 100%;
  border: 2px solid #999;
  border-radius: 4px;
  margin-bottom: 25px;
}

.faqs-container:hover {
  color: #999;
}

.faqs-question button {
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 15px;
  border: none;
  outline: none;
  font-size: 24px;
  font-family: "interstate", sans-serif;
  font-weight: 500;
  color: #300600;
  cursor: pointer;
  transition: 0.6s ease-in-out;
}

.faqs-question button h3 {
  font-size: 28px;
  font-family: "interstate", sans-serif;
  font-weight: 500;
  transition: 0.2s ease-in-out;
  padding: 10px;
}

.faqs-question button h3:hover {
  color: #999;
  transition: 0.2s ease-in-out;
}

.faqs-question i {
  font-size: 48px;
  transition: 0.5s ease-in-out;
}

.faqs-question i:hover {
  color: #999;
  transition: 0.2s ease-in-out;
}

.faqs-question p {
  margin-top: 10px;
  font-size: 24px;
  font-family: "Merriweather-Sans", sans-serif;
  font-weight: 300;
  line-height: 55px;
  color: #444;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 0.6s ease;
}

.faqs-question p.show {
  max-height: 45vh;
  opacity: 1;
  padding: 10px 0px 40px 15px;
  padding-right: 40px;
  padding-left: 20px;
  margin-bottom: 35px;
}
<div class = "faqs-container">
  <div class = "faqs-question">
    <button>
      <h3>Which services do you provide?</h3>
      <i class = "bi bi-plus">+</i><!-- added the plus for demonstartion (you can remove it) --->
    </button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
  </div>
</div>

Вы можете добавить следующее к существующему javascript:

const icon = button.querySelector('.bi');

if (icon.classList.contains("bi-plus")) {
  icon.classList.toggle("bi-plus");
  icon.classList.toggle("bi-dash");
} else if (icon.classList.contains("bi-dash")) {
  icon.classList.toggle("bi-dash");
  icon.classList.toggle("bi-plus");
}

Вы можете увидеть это в действии здесь: https://jsfiddle.net/hsabio/42tr8jq0/43/

Всем огромное спасибо за помощь!

TheNickster 31.10.2022 22:09
Ответ принят как подходящий

Пожалуйста, обновите код javascript следующим образом:

<script>
    const buttons = document.querySelectorAll('button');

    buttons.forEach(button => {
        button.addEventListener('click', () => {

            const faq = button.nextElementSibling;
            faq.classList.toggle('show');

            const icon = button.children[1];
            if (icon.classList.contains('bi-plus')) {
                icon.className = "bi bi-dash";
            } else {
                icon.className = "bi bi-plus";
            }


        })
    })
</script>

Другие вопросы по теме