CODEWITHSUNDEEP
javascriptjqueryfunctionclicktoggle
AnthonyGalli.com
AnthonyGalli.com

Reputation: 2866

How to trigger toggle() only once on all elements?

How can I only trigger toggle once?

I have...

<%= f.check_box :push %>
<label for="challenge_push" class="reminder-choices">Push</label>
<%= f.check_box :message %>
<label for="challenge_message" class="reminder-choices">Text</label>
<%= f.check_box :mail %>
<label for="challenge_mail" class="reminder-choices">Email</label>

<script>
  $('.reminder-choices').click(function(){
    $(".hide-remind").toggle();
  });
</script>

I tried...

# Same behavior as above. Still toggles back and forth.
$('.reminder-choices').one("click", function(){
    $(".hide-remind").toggle();
});

In other words, once .reminder-choices is clicked once then toggle will work otherwise if it is clicked again then it will not work.

Upvotes: 0

Views: 3014

Answers (2)

Satpal
Satpal

Reputation: 133403

Wrap your code in a container then delegate the event.

$('.container').one('click', '.reminder-choices', function() {
  $(".hide-remind").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="reminder-choices">Click Here</div>
  <div class="reminder-choices">Or Here</div>
  <div class="reminder-choices">Or Here</div>
</div>
<div class="hide-remind">Will be toggled</div>

Upvotes: 0

Marijan
Marijan

Reputation: 1865

Your second try should work. You could also do it like this.

$('.reminder-choices').on('click.reminder', function() {

    $(".hide-remind").toggle();
    $(this).off('click.reminder');
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="reminder-choices">Click Here</div>
<div class="hide-remind">Will be toggled</div>

Edit: If you have multiple elements and want clicks to be ignored on all elements after one of them has been clicked:

$('.reminder-choices').on('click.reminder', function() {

    $(".hide-remind").toggle();
    $('.reminder-choices').off('click.reminder');
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="reminder-choices">Click Here</div>
<div class="reminder-choices">Or Here</div>
<div class="reminder-choices">Or Here</div>

<div class="hide-remind">Will be toggled</div>

Upvotes: 3

Related Questions