Add a Timer that add class to a div , then remove the class and add it to another div-CodePudding

I am creating a tutorial that explains in 4 steps how an application works.

Currently, clicking on one of the steps adds a class that changes the text and displays an additional image.

I would like this process to be automatic as well, and to trigger this action at each step, in sequence, after a few seconds.

I think I need to use a setTimeout() function, but I can't visualize how to go from one step to the other ( and ideally make a loop we the process arrives to the step 4 )

here is my code so that it is more understandable.

Thanks a lot for your help

jQuery(".tutorial-point").click(function (e) {
    jQuery(".tutorial-point").removeClass("active-tuto");
    jQuery(this).addClass("active-tuto");
});

jQuery('.tutorial-point').on('click', function (e) {
    e.preventDefault();
    var imgSRC = jQuery(this).data('src');

    jQuery('#imageFlowchart').html('<img src="'   imgSRC   '" alt="" />');
});

.tutorial-container {
  background: #002832;
  display: flex;
  flex-direction:column;
  justify-content: space-around;
  max-width: 1200px;
  padding: 5rem 1rem;
  margin: auto;
}

.tutorial-text-block {
  max-width: 430px;
}

.tutorial-title {
  color: white;
  padding-bottom: 2rem;
  padding-top: 2rem;
}

.tutorial-point {
  cursor: pointer;
  color: #7384A7;
  padding: 10px;
  display: flex;
}

.tutorial-point:before {
  content: url("https://cdn.unitplus.eu/images/checkbox-blank-circle-line.svg");
  padding-right: 12px;
}

.tutorial-img-block {
  align-self: center;
}

.active-tuto {
color: white;
display: flex;


}

.active-tuto:before {
  content: url("https://cdn.unitplus.eu/images/checkbox-circle-line.svg");
  padding-right: 12px;
}

.tuto-img {
  height: 360px;
  width: 360px;
}

.tuto-img img {
  height: 360px;
  width: 360px;
animation: fadeIn 1s;
-webkit-animation: fadeIn 1s;
-moz-animation: fadeIn 1s;
-o-animation: fadeIn 1s;
-ms-animation: fadeIn 1s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

#tutoImg {
height: 360px;
width: 360px;
}

.tutorial {
  margin-top: 6rem;
  width: 100%;
  background-color:#002832 ;
}

.tutorial.img-block {
  align-self: center;
}

.white-logo {
  background-image: url("https://cdn.unitplus.eu/images/checkbox-circle-line.svg");
}

.black-logo {
  background-image: url("https://cdn.unitplus.eu/images/checkbox-blank-circle-line.svg");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tutorial">
      <div class="tutorial-container">
        <div class="tutorial-text-block">Here is the tutorial</div>
          <div class="tutorial-paragraph-block">
            <div class="active-tuto tutorial-point text-font-16" data-src="https://via.placeholder.com/150">
              <div>Step 1</div>
            </div>
            <div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/151">
              <div>Step 2</div>
            </div>
            <div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/152">
              <div>Step 3</div>
            </div>
            <div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/153">
              <div>Step 4</div>
            </div>
          </div>
        </div>
        <div class="tutorial-img-block">
          <div id="imageFlowchart" class="tuto-img">
            <img src="https://via.placeholder.com/150" alt="">
          </div>
        </div>
      </div>
    </div>

CodePudding user response：

This might work, using trigger() function

const interval = setInterval(() => {
  const next = jQuery('.active-tuto').next('.tutorial-point');
  next.length > 0 ? next.trigger('click') : clearInterval(interval);
}, 3000);

It triggers click event on next step every 3 seconds till the last step.

let interval;

const auto = () => {
  if (interval) {
    clearInterval(interval);
  }
  interval = setInterval(() => {
    const next = jQuery('.active-tuto').next('.tutorial-point');
    next.length > 0 ? next.trigger('click') : clearInterval(interval);
  }, 3000);
};
auto();

jQuery(".tutorial-point").click(function (e) {
    jQuery(".tutorial-point").removeClass("active-tuto");
    jQuery(this).addClass("active-tuto");
    auto();
});

jQuery('.tutorial-point').on('click', function (e) {
    e.preventDefault();
    var imgSRC = jQuery(this).data('src');

    jQuery('#imageFlowchart').html('<img src="'   imgSRC   '" alt="" />');
});

.tutorial-container {
  background: #002832;
  display: flex;
  flex-direction:column;
  justify-content: space-around;
  max-width: 1200px;
  padding: 5rem 1rem;
  margin: auto;
}

.tutorial-text-block {
  max-width: 430px;
}

.tutorial-title {
  color: white;
  padding-bottom: 2rem;
  padding-top: 2rem;
}

.tutorial-point {
  cursor: pointer;
  color: #7384A7;
  padding: 10px;
  display: flex;
}

.tutorial-point:before {
  content: url("https://cdn.unitplus.eu/images/checkbox-blank-circle-line.svg");
  padding-right: 12px;
}

.tutorial-img-block {
  align-self: center;
}

.active-tuto {
color: white;
display: flex;


}

.active-tuto:before {
  content: url("https://cdn.unitplus.eu/images/checkbox-circle-line.svg");
  padding-right: 12px;
}

.tuto-img {
  height: 360px;
  width: 360px;
}

.tuto-img img {
  height: 360px;
  width: 360px;
animation: fadeIn 1s;
-webkit-animation: fadeIn 1s;
-moz-animation: fadeIn 1s;
-o-animation: fadeIn 1s;
-ms-animation: fadeIn 1s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

#tutoImg {
height: 360px;
width: 360px;
}

.tutorial {
  margin-top: 6rem;
  width: 100%;
  background-color:#002832 ;
}

.tutorial.img-block {
  align-self: center;
}

.white-logo {
  background-image: url("https://cdn.unitplus.eu/images/checkbox-circle-line.svg");
}

.black-logo {
  background-image: url("https://cdn.unitplus.eu/images/checkbox-blank-circle-line.svg");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tutorial">
      <div class="tutorial-container">
        <div class="tutorial-text-block">Here is the tutorial</div>
          <div class="tutorial-paragraph-block">
            <div class="active-tuto tutorial-point text-font-16" data-src="https://via.placeholder.com/150">
              <div>Step 1</div>
            </div>
            <div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/151">
              <div>Step 2</div>
            </div>
            <div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/152">
              <div>Step 3</div>
            </div>
            <div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/153">
              <div>Step 4</div>
            </div>
          </div>
        </div>
        <div class="tutorial-img-block">
          <div id="imageFlowchart" class="tuto-img">
            <img src="https://via.placeholder.com/150" alt="">
          </div>
        </div>
      </div>
    </div>