jQuery Drop Down Menu - slideToggle

Question

jQuery

$(document).ready(function(){
 $('.cats_showall').click(function(){
  $('.cats_dropdown li').slideToggle();  
 });
});

CSS

.cats_dropdown li{
 display: none;
}
.cats_dropdown > li:first-child{
 display: list-item; 
}

HTML

<ul class="cats_dropdown">
    <li>Category 1 - <a href="#" class="cats_showall">Show all</a></li>
    <li>Category 2</li>
    <li>Category 3</li>
    <li>Category 4</li>
</ul>

But it doesn't work. Please help :)

Answer 1

It would be great if you can explain properly what you need. As per my understanding you want to apply SlideToggle() effect and the Show All link should be visible. Check this,

$(document).ready(function(){
   $('.cats_showall').click(function(){
      $('.cats_dropdown li:not(:first)').slideToggle();           
   });
});

Answer 2

This will keep the list items from losing their bullets:

$(document).ready(function(){
        $('.cats_showall').click(function(){
                $('.cats_dropdown li:not(:first)').slideToggle(function() {
                    if($(this).is(':visible')) {
                        $(this).css('display','list-item');
                    }
                });
        });
});