Jair Project Lottie

Add classes to a bucket as a button is clicked.

by dixalex

HTML

<ul class='lottie-conclusion-bucket'>
  <li class='lottie-visible slide-01'><span>Metals insight</span></li>
  <li class='lottie-hidden slide-02'><span>Each kingdom</span></li>
  <li class='lottie-hidden slide-03'><span>Place holder 3</span></li>
  <li class='lottie-hidden slide-04'><span>Place holder 4</span></li>
  <li class='lottie-hidden slide-05'><span>Place holder 5</span></li>
  <li class='lottie-hidden slide-06'><span>Place holder 6</span></li>
</ul>
<div>Slide seen counter: <insert class='lottie-slide-seen-counter'>0</insert>
</div>
<button class='lottie-next'>Next Slide</button>
<!-- Lottie conclusion recap v1.0 12/04/2023-->

CSS

body {
  background-color: navy;
  color: #FFF;
  font-family: arial;
}

ul {
  max-width: 15em;
}

li.lottie-visible {
  border: 1px solid tan;
  border-left: 5px solid tan;
  padding: 0.3em;
  margin: 0.3em;
  list-style-type: none;
  border-radius: 2px;
  min-height: 1.5em;
}

li.lottie-hidden {
  border: 1px dashed tan;
  padding: 0.3em;
  margin: 0.3em;
  list-style-type: none;
  border-radius: 2px;
  min-height: 1.5em;
}

li.lottie-hidden span {
  display: none;
}

button {
  clear: both;
  padding: 1.5em;
  cursor: pointer;
  margin: 2em;
}

JavaScript

//This line sets the lottie slide seen counter to the count of the visible elements in the lottie bucket
$('.lottie-slide-seen-counter').text($('.lottie-conclusion-bucket li.lottie-visible').length);

//Initialize event bind.  Replace class to actual lottie button or add the class to it "lottie-next"
$('.lottie-next').on('click touch', function(evt) {

  //Check if a slide has an conclusion li elements have been made visible
  //if so, we grab the next available hidden and show it
  if ($('.lottie-conclusion-bucket li.lottie-visible').length) {
    $('.lottie-conclusion-bucket li.lottie-hidden:first').removeClass('lottie-hidden').addClass('lottie-visible');
  } else {
    //Otherwise, we grab the next available list element to be buffered and show by removing the lottie-hidden class
    //and add the lottie-visible class
    $('.lottie-conclusion-bucket li:first').removeClass('lottie-hidden').addClass('lottie-visible');
  }

  $('.lottie-slide-seen-counter').text($('.lottie-conclusion-bucket li.lottie-visible').length);

  //Please note that the first slide was deliberately initialized with the visible flag to show the functionality.
  //But I assume you'd want it hidden initially so you can simply change the class name from lottie-visible to lottie-hidden if needed
});