CODEWITHSUNDEEP
jqueryhtmlcssslidetoggle
Ben Shelock
Ben Shelock

Reputation: 20965

jQuery Drop Down Menu - slideToggle

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

.cats_dropdown>li:first-child {
  display: list-item;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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 :)

Upvotes: 1

Views: 3521

Answers (2)

karim79
karim79

Reputation: 342635

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');
                    }
                });
        });
});

Upvotes: 1

kayteen
kayteen

Reputation: 777

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();           
   });
});

Upvotes: 3

Related Questions