Solution 1 :

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.

Solution 2 :

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>

Problem :

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>

Comments

Comment posted by Rory McCrossan

I’m guessing it’s Owen Hargreaves?

Comment posted by sgt_pepper85

Haha nice try, wasn’t really a winger though was he? I’m looking for Jadon Sancho :p

Comment posted by Rory McCrossan

Yeah, that’s why I had doubts 🙂

Comment posted by sgt_pepper85

Perfect! Thank you very much!!

By

Leave a Reply

Your email address will not be published. Required fields are marked *