How can I create an accordion menu with only a few expandable options? I am looking to include the following items in my menu:
Home, Support, Sales, Other
The "Home" option is just a link without any sub-menu. Clicking on it should direct users to a specific page.
The "Support," "Sales," and "Other" options will have several links within them as sub-items.
$(function() {
$( ".leftMenu" ).accordion({
heightStyle: "content",
active: false,
collapsible: true,
});
});
To implement this in HTML:
<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>
<ul>
<li>Stuff1</li>
<li>Stuff2</li>
</ul>
</div>
</div>
In order to avoid confusion, make sure to add a <div> under each <h3>.
Check out the example on JSFiddle.