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(document).ready(function(){
    J("#menu dd").hide();
    if($('#' + parent).hasClass('selected')) {
    J("#menu dd").show();
    }
    J("#menu dt a").click(function(){
        J("#menu dd:visible").slideUp("slow");
        J(this).parent().next().slideDown("slow");
        return false;
    });
});
</script>

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>
<dd>
<ul>
    <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>
</ul>
</dd>

2 answers

0
points
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");
        $(this).parent().next().slideDown("slow");
        return false;
    });
Answered over 7 years ago by Andrew Cetnarskyj
danwellman 5600
0
points

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 over 7 years ago by danwellman