Я пытаюсь взять значок «Плюс» для своего аккордеона и переключить его на значок «Минус» при нажатии с помощью 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>
`
Я не знаю, с чего начать. Хотя я понял, как показать ответ аккордеона по клику, я не уверен, как переключить значок «Минус»..
Я также хочу, чтобы вы помнили, что в 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/
Пожалуйста, обновите код 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>
Всем огромное спасибо за помощь!