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

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -