Prevent Jquery Accordion tab from expanding
- by Edwin
I'm trying to use JQuery UI Accordion as a menu, but I can't figure out how to prevent some tabs from expanding.
My JS:
$("#sidebar").accordion({
collapsible: true,
changestart: function(event, ui) {
switch ($(ui.newHeader).attr("id")) {
case "sidebar_grades":
return false;
break;
}
}
});
the HTML:
<div id="sidebar">
<h3 id="sidebar_home">
<a href="/blah">Home</a>
</h3>
<div>
<a href="/child">Settings</a>
</div>
<h3 id="sidebar_grades">
<a href="/grades">Grades</a>
</h3>
<div></div>
<h3 id="sidebar_calendar">
<a href="/calendar">Calendar</a>
</h3>
<div></div>
</div>
In the above example, since #sidebar_grades doesn't have any child, it should not be expandable, but user can click on the link.
I tried using "changestart" event and return false when #sidebar_grades is clicked, but it doesn't work. I also tried attaching onClick event to #sidebar_grades to return false, but that didn't work either.
Any idea how to do this?
Thank you!
