In case anyone ever tries this same thing and runs into the same
problem, here is the solution as I've made it. Given a list containing
sublists:
<div id="categories">
<ul>
<li><a ... class="parent">Parent</a>
<ul>
<li><a ... class="child">Child1</a></li>
<li><a ... class="child">Child2</a></li>
</ul>
</li>
</ul>
</div>
We want the accordion to stay open when the child element is clicked.
As an added usability effect, we will also bold the Child item so the
user knows what they clicked.
// We keep track of the last element clicked so that we
// can unbold it when a new one is clicked
var previousElement = null;
// Creates the accordion
jQuery(document).ready(function(){
jQuery("#categories").accordion({
alwaysOpen: false,
active: false
});
jQuery("ul.categories li a").click(function(){
// Unbold the previously clicked element and
// bold the last clicked element
if(previousElement) previousElement.style.fontWeight = "normal";
this.style.fontWeight = "bold";
previousElement = this;
// Return false to prevent default closing behavior
return false;
});
});
On Jan 25, 1:06 pm, Matt White <[EMAIL PROTECTED]> wrote:
> I am using an accordion with a list of main categories, each with a
> list of sub categories (so just 2 levels of hierarchy). When you click
> a sub category, a nearby div element is populated with a list of
> products via Ajax. The normal behavior for the accordion when you
> click the sub category is to close. I'd like it to stay open when a
> sub category is clicked, kind of like what the navigation option does.
> The navigation option doesn't seem to suit my needs because the URL
> isn't changing because it's just an Ajax request. Does anyone know how
> to accomplish this? Thanks!
