Как осуществить? когда один вопрос открывается, остальные закрываются?
На этой страничке возможно это реализовать (во вкладке Ответы и Вопросы)? Подскажите куда двигаться? нашел на просторах скрипт (второй который), но как применить/привязать к моему списку ФАК не знаю, подскажите пожалуйста
<script> var label1 = document.getElementById('tab-btn-1'); var label2 = document.getElementById('tab-btn-2'); var label3 = document.getElementById('tab-btn-3'); var label4 = document.getElementById('tab-btn-4'); var block1 = document.getElementById('content-1'); var block2 = document.getElementById('content-2'); var block3 = document.getElementById('content-3'); var block4 = document.getElementById('content-4'); var blocks = [block1, block2, block3, block4]; label1.addEventListener('click', () => { for(let i = 0; i < blocks.length; i++){ if(i == 0){ blocks[i].style.display = 'block'; } else{ blocks[i].style.display = 'none'; } } }); label2.addEventListener('click', () => { for(let i = 0; i < blocks.length; i++){ if(i == 1){ blocks[i].style.display = 'block'; } else{ blocks[i].style.display = 'none'; } } }); label3.addEventListener('click', () => { for(let i = 0; i < blocks.length; i++){ if(i == 2){ blocks[i].style.display = 'block'; } else{ blocks[i].style.display = 'none'; } } }); label4.addEventListener('click', () => { for(let i = 0; i < blocks.length; i++){ if(i == 3){ blocks[i].style.display = 'block'; } else{ blocks[i].style.display = 'none'; } } }); </script> <script> let accordYar = document.querySelectorAll(.accordeon-rules ul li input[type="checkbox"]); let accordYarText = document.querySelectorAll(.accordeon-rules ul li input[type="checkbox"]:checked~p); accordYarTextOpen = document.querySelectorAll(.accordeon-rules ul li input[type="checkbox"]:not(:checked)~p).forEach(e=>e.style.display = none); accordYarText.forEach(e => e.style.display = none); for(i=0; i<accordYar.length; i++) { accordYar[i].addEventListener(click, (el)=> { alert(ss); accordYarText.forEach(e=> e.style.display = none) el.currentTarget.classList.add(open); }) } </script> |
<script> var label1 = document.getElementById('tab-btn-1'); var label2 = document.getElementById('tab-btn-2'); var label3 = document.getElementById('tab-btn-3'); var label4 = document.getElementById('tab-btn-4'); var block1 = document.getElementById('content-1'); var block2 = document.getElementById('content-2'); var block3 = document.getElementById('content-3'); var block4 = document.getElementById('content-4'); var blocks = [block1, block2, block3, block4]; label1.addEventListener('click', () => { for(let i = 0; i < blocks.length; i++){ if(i == 0){ blocks[i].style.display = 'block'; } else{ blocks[i].style.display = 'none'; } } }); label2.addEventListener('click', () => { for(let i = 0; i < blocks.length; i++){ if(i == 1){ blocks[i].style.display = 'block'; } else{ blocks[i].style.display = 'none'; } } }); label3.addEventListener('click', () => { for(let i = 0; i < blocks.length; i++){ if(i == 2){ blocks[i].style.display = 'block'; } else{ blocks[i].style.display = 'none'; } } }); label4.addEventListener('click', () => { for(let i = 0; i < blocks.length; i++){ if(i == 3){ blocks[i].style.display = 'block'; } else{ blocks[i].style.display = 'none'; } } }); </script> <script> let accordYar = document.querySelectorAll(.accordeon-rules ul li input[type="checkbox"]); let accordYarText = document.querySelectorAll(.accordeon-rules ul li input[type="checkbox"]:checked~p); accordYarTextOpen = document.querySelectorAll(.accordeon-rules ul li input[type="checkbox"]:not(:checked)~p).forEach(e=>e.style.display = none); accordYarText.forEach(e => e.style.display = none); for(i=0; i<accordYar.length; i++) { accordYar[i].addEventListener(click, (el)=> { alert(ss); accordYarText.forEach(e=> e.style.display = none) el.currentTarget.classList.add(open); }) } </script>
Дополнительно
Сергей delphinpro @delphinpro Куратор тега JavaScript frontend developer snippet
Ответы:
Сделать 1 обработчик, который при клике откроет твой вопрос, а в цикле, другие закроет.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Вам нужен обычный accordion: при открытии одного пункта закрываются остальные. В текущем варианте проблема не только в привязке к конкретным
label1,label2, но и в синтаксисе: селекторы вquerySelectorAll()должны быть строками, вforнужна проверкаi < blocks.length, а скрипт должен запускаться после появления разметки. Проще не писать отдельный обработчик на каждый вопрос, а дать всем пунктам одинаковые классы.<div class='faq-list'> <div class='faq-item'> <button class='faq-question' type='button'>Вопрос 1</button> <div class='faq-answer'>Ответ 1</div> </div> <div class='faq-item'> <button class='faq-question' type='button'>Вопрос 2</button> <div class='faq-answer'>Ответ 2</div> </div> </div><div class='faq-list'> <div class='faq-item'> <button class='faq-question' type='button'>Вопрос 1</button> <div class='faq-answer'>Ответ 1</div> </div> <div class='faq-item'> <button class='faq-question' type='button'>Вопрос 2</button> <div class='faq-answer'>Ответ 2</div> </div> </div>
document.addEventListener('click', function (event) { const button = event.target.closest('.faq-question'); if (! button) return; const current = button.closest('.faq-item'); const wasOpen = current.classList.contains('is-open'); document.querySelectorAll('.faq-item.is-open').forEach(function (item) { item.classList.remove('is-open'); }); if (! wasOpen) { current.classList.add('is-open'); } });document.addEventListener('click', function (event) { const button = event.target.closest('.faq-question'); if (! button) return; const current = button.closest('.faq-item'); const wasOpen = current.classList.contains('is-open'); document.querySelectorAll('.faq-item.is-open').forEach(function (item) { item.classList.remove('is-open'); }); if (! wasOpen) { current.classList.add('is-open'); } });
.faq-answer { display: none; } .faq-item.is-open .faq-answer { display: block; }
Такой код работает для любого количества вопросов, потому что ищет текущий пункт через
closest(). Если один ответ всегда должен оставаться открытым, уберите переменнуюwasOpenи всегда добавляйте классis-openтекущему пункту после закрытия остальных. Если разметка уже сделана на checkbox, можно либо заменить их на radio с одинаковымname, если один пункт должен быть открыт всегда, либо при событииchangeсниматьcheckedсо всех соседних checkbox. Но для FAQ кнопки обычно правильнее: это действие интерфейса, а не поле формы.