Home/ Questions/Q 6671773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T03:25:44+00:00

I wrote this code and it works fine when there’s only 2 menus, but

  • 0

I wrote this code and it works fine when there’s only 2 menus, but as soon as there’s 3 or 4, the slideToggle double-slides (blinks).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {

    $('.menu').hide();

    $('#nav a').click(function(){
        var idvar = this.id;
        var menuid = '#menu_'+idvar;
        $('.menu').not(menuid).slideUp( function(){ 
            $(menuid).slideToggle(); 
        });
        return false;
    });
});
</script></head><body>

<div id="nav">
    <a href="#" id="dogs">Dogs</a>
    <a href="#" id="cats">Cats</a>
    <a href="#" id="horses">Horses</a>
    <a href="#" id="cows">Cows</a>
</div>

<div class="menu" id="menu_dogs">stuff about dogs</div>
<div class="menu" id="menu_cats">stuff about cats</div>
<div class="menu" id="menu_horses">stuff about horses</div>
<div class="menu" id="menu_cows">stuff about cows</div>

</body></html>

View a demo of the issue: (delete any two menus to see it working how it’s intended)
http://jsfiddle.net/ANDXJ/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Like mrtsherman said, you are trying to slideup ALL menu items, you need to slide up only the visible one. To preserve your slide up slide down transitions i had to add a little more logic in. Take a look at this fiddle.

    • 0