Wsrtjtyk

I have five class, witch is disabled by default with style display: none;

Also i have div box with have this class

<style>.box-1, .box-2, .box-3, .box-4, .box-5 { display: none;}</style>



<div class="box-1">Name1</div><div class="box-1">Age1</div>

<div class="box-2">Name2</div><div class="box-2">Age2</div>

<div class="box-3">Name3</div><div class="box-3">Age3</div>

<div class="box-4">Name4</div><div class="box-4">Age4</div>

<div class="box-5">Name5</div><div class="box-5">Age5</div>



<div class="button-show">show</div> <div class="button-hide">hide</div>

bottom i have show and hide button.

I want make that in first click on SHOW, i can see box-1, in second click box-2... then box-3 box-4 box-5 and click on HIDE disable box from last.

Example 1:

if i have see 1 2 3 4 5, it will hide on click 5 4 3 2 1

Example 2:

if i have see 1 2, it will hide on click 2 1.

P.S. I want that is used jquery.js?ver=1.12.4

You need jquery click event and a counter that remember the current number.

The method will be like below:

$(document).ready(function(){

  let counter = 0;

  $(".button-show").on("click", function(){

    counter++;

    if(counter > $('[class*=box]').length/2){

      counter = $('[class*=box]').length/2;

    }

    $(".box-"+counter).show();

  });

  

  

  $(".button-hide").on("click", function(){

    $(".box-"+counter).hide();

    counter--;

  });

});

.box-1, .box-2, .box-3, .box-4, .box-5 { display: none;}



.button-show, .button-hide{

  width:100px;

  height:30px;

  background-color:blue;

  color:white;

  text-align:center;

  line-height:30px;

  border-radius: 5px;

  display:inline-block;

  margin:10px;

  cursor:pointer;

}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div class="button-show">show</div> <div class="button-hide">hide</div>

<div class="box-1">Name1</div><div class="box-1">Age1</div>

<div class="box-2">Name2</div><div class="box-2">Age2</div>

<div class="box-3">Name3</div><div class="box-3">Age3</div>

<div class="box-4">Name4</div><div class="box-4">Age4</div>

<div class="box-5">Name5</div><div class="box-5">Age5</div>

I imagine that you could do something like this:

var count = 1;



function show() {

    $(".box-"+count).show();

    count++;    

}



function hide() {

    for(val = 4; val == 0; val--){

        $(".box-"+val).hide();

    }   

}

HTML

<style>.box-1, .box-2, .box-3, .box-4, .box-5 { display: none;}</style>



<div class="box-1">Name1</div><div class="box-1">Age1</div>

<div class="box-2">Name2</div><div class="box-2">Age2</div>

<div class="box-3">Name3</div><div class="box-3">Age3</div>

<div class="box-4">Name4</div><div class="box-4">Age4</div>

<div class="box-5">Name5</div><div class="box-5">Age5</div>



<div class="button-show" onclick="show()">show</div> <div class="button-hide" onclick="hide()">hide</div>