У меня есть div с именем .multi-col-icon-list.У этого div есть двое детей:
.text_col-1: в которых находятся значки image_col-2: в котором находится динамический div.Он будет отображать информацию, основанную на том, какой значок был нажат.
На рабочем столе значки отображаются в сетке 3x3.Тем не менее, для мобильных устройств, я пытаюсь превратить его в аккордеон.
Изображение, показывающее, как я хотел бы, чтобы оно функционировало:
У меня рабочий стол работает нормально,Но кажется, что текст не отображается под мобильным, и я считаю, что это из-за WordPress.
В приведенном ниже коде вы увидите, что демонстрационный код выполняет свою работу.Однако на моей странице, когда я нажимаю кнопку, на теге p отображается display: block; вместо изменения .accordionPanel на display: block;.
Предположение, что теги p генерируются из WordPress автоматически, и я не хочу входить и отключать их, потому что я не уверен в том, как кодируются другие страницы.
Сказав, что, JS специально заявляет, чтобы изменить . accordionPanel на block, поэтому не знаете, почему меняется p?
Код:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var accordionPanel = this.nextElementSibling;
if (accordionPanel.style.display === "block") {
accordionPanel.style.display = "none";
} else {
accordionPanel.style.display = "block";
}
});
}
img {
height: 50px;
}
.text_col-1{
display: flex;
flex-direction:column;
}
.accordionPanel{
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 3px solid #6BBDB9;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="two_col-container">
<div class="text_col-1">
<!-- ACCORDION -->
<div class="accordion-wrapper">
<!-- ELEMENT 1 -->
<button class="accordion">
<img src="https://img.icons8.com/metro/1600/1-circle.png">
<h4>Section 1</h4>
</button>
<div class="accordionPanel">
<p>text for icon 1</p>
</div>
<!-- ELEMENT 2 -->
<button class="accordion">
<img src="https://img.icons8.com/metro/1600/2-circle.png">
<h4>Section 2</h4>
</button>
<div class="accordionPanel">
<p>text for icon 2</p>
</div>
<!-- ELEMENT 3 -->
<button class="accordion">
<img src="https://img.icons8.com/metro/1600/2-circle.png">
<h4>Section 3</h4>
</button>
<div class="accordionPanel">
<p>text for icon 3</p>
</div>
<!-------------->
</div>
</div>
</div>
Мои вопросы:
- Есть ли обходной путь?чтобы сделать
.accordionPanel display: block, а не что-нибудь еще? - Как мне сделать так, чтобы кнопки всегда были закрыты при первом запуске?