jQuery Best way to show list items one by one

Question

I would like to show list items one by one by clicking on a button.

Here is my code:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function() {
        $('ol > li').hide();
        $('button').click(function() {
            if ($('ol > li:first').is(':visible'))
                $('ol > li:visible:last').next().show();
            else
                $('ol > li:first').show();
        });
    });
</script>
<button type="button">Show</button>
<ol>
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
    <li>#4</li>
    <li>#5</li>
    <li>#6</li>
</ol>

It works but I am pretty sure that can be optimize. What would be the best way?

Thanks in advance!

Answer 1

<script>
$(document).ready(function() {
  var $liList= $('ol > li');
   $liList.hide();
    $('button').click(function() {
        var $first=$liList.filter(":first")
        if ($first.is(':visible'))
            $liList.filter(":visible:last').next().show();
        else
            $first.show();
    });
});
</script>

Answer 2

You can do the show as a single line instead:

$('button').click(function() {
    $('ol > li:hidden:first').show();
});

Working Example - http://jsfiddle.net/WV84H/

You can make it a little bit more efficient by caching the list of li's:

var $listItems = $('ol > li');
$('button').click(function() {
    $listItems.filter(':hidden:first').show();
});

Working Example - http://jsfiddle.net/WV84H/1/

Answer 3

I use css transition-delay property for this and scss to increment it for each <li> element

https://www.w3schools.com/cssref/css3_pr_transition-delay.asp

    $delay-increment: 0.3;
    $delay: 0-$delay-increment;

    @for $i from 1 through 10 { //adding transition delays to provide sequential icons show on profile load
        li:nth-child(#{$i}) {
            transition-delay: #{$delay+$delay-increment}s;

            &:after{
                transition-delay: #{$delay+$delay-increment}s;
            }
        }

        $delay: $delay + $delay-increment;
    }

to show <li> I use JS just to set class show which is responsible for opacity change

see example with compiled sass below:

$('.show').click(function() {
  $('ul').toggleClass('show');
})

li:nth-child(1) {
  transition-delay: 0s;
}

li:nth-child(2) {
  transition-delay: 0.3s;
}

li:nth-child(3) {
  transition-delay: 0.6s;
}

li:nth-child(4) {
  transition-delay: 0.9s;
}

li:nth-child(5) {
  transition-delay: 1.2s;
}

li:nth-child(6) {
  transition-delay: 1.5s;
}

li:nth-child(7) {
  transition-delay: 1.8s;
}

li:nth-child(8) {
  transition-delay: 2.1s;
}

li:nth-child(9) {
  transition-delay: 2.4s;
}

li:nth-child(10) {
  transition-delay: 2.7s;
}

ul>li {
  opacity: 0;
  transition: opacity .4s;
}

ul.show>li {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='show'>Show</button>

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

Answer 4

$('ol > li').hide();
$('button').click(function() {
    $('ol > li:hidden').eq(0).show();
});

Working Example http://jsfiddle.net/YVeuY/