Question

When a user clicks the Accordion Menu button it usually works. But, about 1 out of 10 times the animation doesn’t stick and goes back to either expanded or collapsed, depending on what state it started at. I’ve copied the scripts from other places, but they seem simple enough.

HTML:

<ul id="system-nav">
    <li><div>Umbrella</div>
        <ul>
            <li><a href="../../Admin">Admin</a></li>
            <li><a href="../../Deshboard">Dashboard</a></li>
            <li><a href="../../Daylight">Daylight</a></li>
        </ul>
    </li>
</ul>

Like I’ve said, I’ve tried several different versions of the same thing. These were just taken from random places and I’ve only edited them slightly. All of them do the same thing.

$("#system-nav > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
    $('#system-nav ul').slideUp(300);
}

$(this).next().slideToggle(300).delay(250);
});

$('#system-nav ul:eq(0)').hide();

---

$(document).ready(function() {  
$('#system-nav li div').click(function() {
    $('#system-nav ul').slideUp('slow');    
    $(this).next().slideDown('slow');
});

$("#system-nav ul").hide();

 });

---

$(document).ready(function(){
$('#system-nav li div').click(function() {
    $(this).next().slideDown('slow');
    return false;
}).next().hide();
});

Answer 1

In the first JS sample using :visible is not the right proprety. Use :hidden instead

In the second one you’re cliping it ?

In the last one you’re canceling it ?

---

Here’s a working code: http://jsfiddle.net/Q9qNw/

$("#system-nav").on("click","div",function(){
    if ($(this).next().is(":hidden")) {
        $(this).next().slideDown("500");
    } else {
        $(this).next().slideUp("500");
    }
});