How do I make my button reveal one item at a time?

user_13146212 0
Viewed 188

I have created a list which I want to keep hidden from the user, and a button which I want to use to reveal the list items one by one. I am using jquery and css to hide/display the list items.

My code works fine to reveal the first 'clue' but my question is how do I make the button reveal the second clue on a second click, and then the third clue on a third click. And then after the third click I would like to make the button redundant. Thanks in advance

$(document).ready(function() {
  $(".help").click(function() {
    $('li.hide-1').removeClass('hide-1');
  });
});
.hide-1,
.hide-2,
.hide-3 {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clues">
  <ul>
    <li class="hide-1">Right winger</li>
    <li class="hide-2">Established himself in the Bundesliga</li>
    <li class="hide-3">England International</li>
  </ul>
</div>
<div class="button">
  <button type="button" class="help">I need help</button>
</div>

html-lists button jquery
2 Answers

I'd recommend storing a count of how many times the button has been clicked, and then use this number for each time you remove the class. Something like:

var buttonCount = 0;
$(document).ready(function() {
    $(".help").click(function() {
        buttonCount += 1;
        $(`li.hide-${buttonCount}`).removeClass(`hide-${buttonCount}`);
    });
});

After the list is complete then the button should do nothing, but there are ways to remove it too. This might include having a limit and when you reach that limit use jquery to hide the button or disable it. Or to count the number of items with the class starting with hide, and if there are none then disable the button.

Good luck.

user_33191750

The most straightforward way to do this is to put the same class on all the li. Then you can add a new class to show them, and you can use that class to find the li which should be shown when the button is next clicked. Something like this:

jQuery($ => {
  $(".help").click(function() {
    var $target = $('.clue.show').next();
    if ($target.length === 0)
      $target = $('.clue:first');
      
    $target.addClass('show');
  });
});
.clue {
  display: none;
}

.clue.show {
  display: list-item;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clues">
  <ul>
    <li class="clue">Right winger</li>
    <li class="clue">Established himself in the Bundesliga</li>
    <li class="clue">England International</li>
  </ul>
</div>
<div class="button">
  <button type="button" class="help">I need help</button>
</div>

user_5194130
Related