How to use accordion with non expandable elements
Hi everyone!
I am not familiar with jQuery so sorry in advance if the question is pretty basic.
I am using the Accordion to one of my pages.
I have a list of items and I need some of them to expand/collapse and some of them not to. At the same time I need the ones that expand to interact with each other, so when one expands, another collapses.
Everything works great but I have a problem with the elements that I don't want to expand, I just need them to stay simple headers.
Right now, I had to add empty divs otherwise it breaks all divs but I end up having collapsable elements that I don't need.
Here's what my HTML looks like:
- <div id="accordion" class="col-xs-12">
<h3>Header</h3><div></div>
<h3>Header</h3><div></div>
<h3><i class="fa fa-check"></i>Header 3</h3><div><ul id="googlelist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<h3>Header</h3><div></div>
<h3>Header</h3>
<div>
<ul id="googlelist">
<li>Item1</li>
<li>Item 2</li>
</ul>
</div>
<h3>Header</h3>
<div><ul id="googlelist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul></div></div></div>