jquery accordion only a few expandable

Question

how can i do an accordion menu with only a few options expandable? I want to have a menu

Home,Support,Sales,Other

Home has nothing in it, its just a link. so when you click on home, no expansion happens, it just does whatever i tell the links to do.

Support/Sales/Other have a few options in it. the options themselves will be links.

$(function() {
  $( ".leftMenu" ).accordion({
     heightStyle: "content",
     active: false,
     collapsible: true,
  });
 });

 <h3><li id='home'>Home</li></h3>
 <h3>Support</h3>
   <div>
      <ul>
        <li>New Tickets</li>
        <li>Existing Tickets</li>
        <li>Contact</li>
      </ul>
   </div>
 <h3>Other</h3>
   <div>
    <li>stuff</li>
    <li>stuff</li>
   </div>
</div>

if i dont add a div under each H3, it gets all confused.

fiddle

Answer 1

It seems that accordion needs the div after the h element for it

For example with this html it will work as expected

<div class='leftMenu'>
    <h3 id ="home">Home</h3>
    <div></div>
     <h3>Support</h3>
      <div>
        <ul>
            <li>New Tickets</li>
            <li>Existing Tickets</li>
            <li>Contact</li>
        </ul>
    </div>
     <h3>Other</h3>

    <div>
        <li>stuff</li>
        <li>stuff</li>
    </div>
</div>

Fiddle

Description: Convert a pair of headers and content panels into an accordion. Accordion Docs