Хочу понять логику создания Аккордеона на JS с картинками
Мой код :
const accordion = document.getElementById('acc')
const text = document.querySelectorAll('.panel')
accordion.addEventListener('click', function(event) {
if (event.target.tagName === 'H3') {
let selectFlag = false
if (event.target.nextElementSibling.classList.contains('panel_show')) {
selectFlag = true
}
text.forEach(text => {
text.classList.remove('panel_show')
})
if (!selectFlag) {
event.target.nextElementSibling.classList.add('panel_show')
}
}
})<ul class="acc">
<li>
<h3 class="accordion">mainText</h3>
<div class="panel">text</div>
</li>
<li>
<h3 class="accordion">mainText</h3>
<div class="panel">text</div>
</li>
<li>
<h3 class="accordion">mainText</h3>
<div class="panel">text</div>
</li>
<li>
<h3 class="accordion">mainText</h3>
<div class="panel">text</div>
</li>
</ul>Это все работает , справа от акордеона находится колонка с изображениями , которые я хочу переключать при нажатии (определенный элемент = определенная картинка). Подскажите просто саму логику (без кода). Задать им класс display:none, связать их с определенным элементом по id и показывать через классы? Или связать их по id и делать innerHTML в div созданный для картинки ?