Tutorial 2

Keep clicking the paper until you've folded it into a plane!

Paper airplane step 1 Paper airplane step 2 Paper airplane step 3 Paper airplane step 4 Paper airplane step 5 Paper airplane step 6
Paper airplane step 1 Paper airplane step 2 Paper airplane step 3 Paper airplane step 4 Paper airplane step 5 Paper airplane step 6
Paper airplane step 1 Paper airplane step 2 Paper airplane step 3 Paper airplane step 4 Paper airplane step 5 Paper airplane step 6

Great! Now it's time to fly your airplane!

© Christel Chan 2017 | For Educational Purposes Only

? How it works >

This tutorial will teach you how to add a click function to show images sequentially.

1 >

In your HTML markup, store your images one after another in a parent container. I have three sets of images but only one is shown here.

  

    <div class="steps-container">

      <div class="steps steps-1">

        <img src="images/steps-1-01.png" class="step-1" alt="Paper airplane step 1">
        <img src="images/steps-1-02.png" class="step-2" alt="Paper airplane step 2">
        <img src="images/steps-1-03.png" class="step-3" alt="Paper airplane step 3">
        <img src="images/steps-1-04.png" class="step-4" alt="Paper airplane step 4">
        <img src="images/steps-1-05.png" class="step-5" alt="Paper airplane step 5">
        <img src="images/steps-1-06.png" class="step-6" alt="Paper airplane step 6">

      </div>

    </div>

  
  
2 >

Next, style the images in your CSS so they are set to "display: none".

  

    .steps {
      width: 300px;
      height: 300px;
      margin: 0 auto;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }

    .steps img {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }

  
  
3 >

Here is the crucial Javascript/jQuery code! Store your images in an array in the order you'd like to show them, and let i represent the current image. We want to show the first image only, so define i = 0, and show it with simple jQuery code. Then, add a click function to your images container, so that when the user clicks it, the current image is hidden, i increases by 1, and the next image is shown. The if statement makes sure that the click function doesn't work anymore when the last image has already been shown.

  

    // HTML elements from fold.html
    const $stepsContainer = $('.steps');

    //Steps Array
    const steps = [];

      steps[0] = $('.step-1');
      steps[1] = $('.step-2');
      steps[2] = $('.step-3');
      steps[3] = $('.step-4');
      steps[4] = $('.step-5');
      steps[5] = $('.step-6');

    let i=0;

    steps[0].show();

    // Show next step
    $stepsContainer.click(function(){

      if(i < steps.length-1){

      steps[i].hide();

      i++;

      steps[i].show();
      }

    });