I have a working jQuery accordion but I have a problem that I need I want to expand my list/panel when a parent class has the attribute of "selected" on it. Can any one help please?

This is what I have for my jQuery :

<script type="text/javascript">
var J = jQuery.noConflict();
    J("#menu dd").hide();
    if($('#' + parent).hasClass('selected')) {
    J("#menu dd").show();
    J("#menu dt a").click(function(){
        J("#menu dd:visible").slideUp("slow");
        return false;

And my html structure for a panel that is selected is :

<pre><code>    &lt;div id="menu"&gt;

<dt><a href="#/" class="selected">Necklaces</a></dt>
    <li><a href="#" title="Necklaces Department">All Necklaces</a></li>
    <li><a href="#" title="Hearts Department">Hearts</a>
    <li><a href="#" title="Necklace 2 Department">Necklace 2</a>

2 answers

This was chosen as the best answer

I found the answer myself, here is the code:

$("#menu dd:not('.current')").hide();
    $("#menu dt a").click(function(){
        $("#menu dd:visible").slideUp("slow");
        return false;
Answered almost 10 years ago by Andrew Cetnarskyj
danwellman 5600

I would advise using the jQuery UI accordion widget - it applies a selected class to open accordion panels and has a range of configuration options and methods for working with it programmatically.

It's very easy to work with, very attractive and functional and has already been through strict refactoring/bug fixing processes :)

Answered almost 10 years ago by danwellman