jquery - Can I have expandable and non-expandable elements using Accordion? -
i have spent last hours trying find solution on this, cannot find any. use accordion | jquery ui list. in list there items need expand show more content , others should text.
it looks though if break suggested structure accordion doesn't work @ all.
at point, had add empty divs doesn't break, ended having header expand no content show.
is there way keep headers don't need expanding , ones without falling apart?
here's 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>
if understand requirement correctly, can use hack using 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
Comments
Post a Comment