Toggle Class sequentially-CodePudding

I'm trying to toggle class for elements sequentially. I got this code I found and modified to work, but only with fade:

    $('.desplegable').click(function() {
            
    var lis = $(this).parent().find('.pops');
    var delay = 0;
    
    lis.each(function() {
        var $li = $(this);
        $li.queue('fade', function(next) {
            $li.delay(delay).fadeIn(0, next);
        });
        
        $li.dequeue('fade');
        
        delay  = 100;
    });
});

is it possible to do it with toggle class? something like this, but here the sequence doesn't work

$('.desplegable').click(function() {
            
    var lis = $(this).parent().find('.pops');
    var delay = 0;
    
    lis.each(function() {
        var $li = $(this);
        $li.queue('toggle', function(next) {
            $li.delay(delay).toggleClass('appear', next);
        });
        
        $li.dequeue('toggle');
        
        delay  = 100;
    });
});

This is the HTML

<div>
<div class="desplegable">Title</div>
<div class="pops">Element 1</div>
<div class="pops">Element 2</div>
<div class="pops">Element 3</div>
</div>

CodePudding user response：

To do what you require you can use fadeToggle() with an incremental delay on each .pops element in the set.

This can also be extended to reverse the order of the fade when hiding the elements on successive clicks:

$('.desplegable').click(function() {
  var $pops = $(this).parent().find('.pops').stop();      
  if ($pops.eq(0).is(':visible'))
    $pops = $($pops.get().reverse());
    
  $pops.each((i, el) => $(el).delay(100 * i).fadeToggle(300)); 
});

.pops { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="desplegable">Title</div>
  <div class="pops">Element 1</div>
  <div class="pops">Element 2</div>
  <div class="pops">Element 3</div>
</div>