CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
kat_indo
kat_indo

Reputation: 422

Can I have expandable and non-expandable elements using Accordion?

I have spent the last hours trying to find a solution on this, but I cannot find any. I use Accordion | jQuery UI for a list. In the list there are items that I need to expand to show more content and others that should be just text.

It looks like though that if I break the suggested structure the accordion doesn't work at all.

At this point, I had to add empty divs so that it doesn't break, but I ended up having header that expand with no content to show.

Is there a way to keep the headers that don't need expanding and the ones they do together without everything falling apart?

Here's my HTML:

<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>

Upvotes: 1

Views: 230

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

If I understand your requirement correctly, you can use a hack using a custom click handler like

<div id="accordion" class="col-xs-12">         
    <h3 class="none">Header</h3><div></div>
    <h3 class="none">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>

then

$('#accordion h3.none').click(function (e) {
    e.stopImmediatePropagation();
})
$('#accordion').accordion({
    collapsible: true,
    active: false
});

Demo: Fiddle

Upvotes: 3

Related Questions