CODEWITHSUNDEEP
javascriptjquerycssunbind
Stacy J
Stacy J

Reputation: 2781

How to set jquery unbind as toggle

Following is my script to show and hide content on click of a div. I also want to disable other div elements until the first div is clicked again.

$('.leader-pic-wrapper').click(function(){
    var $el = $(this);
    var bottom = $el.position().top + ($el.outerHeight(true) - 30);
    $('.leader-pic-overlay').toggle();
    $('.leader-pic-wrapper').not(this).toggleClass('inactive-leader');

    /*$(".inactive-leader").unbind("click");*/
    $(".inactive-leader").off("click");

    $(this).next('.leader-profile-wrapper').css('top', bottom);
    $(this).next('.leader-profile-wrapper').toggle();
});

I don't understand how to toggle the unbind statement. I tried toggling a class called inactive-leader and apply unbind to that class, but its not working.

Basically I want to set unbind on 

leader-pic-wrapper

Thanks

Upvotes: 2

Views: 210

Answers (1)

DaniP
DaniP

Reputation: 38252

My option is approach this with a different view. Without bind and unbind the event just exclude the items with the first selector using :not(), and as you are doing add a class to the elements you want to exclude; please check this snippet:

$('body').on('click', '.box:not(".disabled")', function() {
  if ($('.disabled').length) {
    $(this).siblings().removeClass('disabled')
    $(this).animate({
      'width': '80px'
    }, 300)
  } else {
    $(this).siblings().addClass('disabled')
    $(this).animate({
      'width': '160px'
    }, 300)
  }
})
.box {
  display: inline-block;
  height: 80px;
  width: 80px;
  background: tomato;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

This logic on your code will look like this:

//Delegate the event since we are add/remove the class
//Target the elements that aren't inactive
$('body').on('click', '.leader-pic-wrapper:not(".inactive-leader")', function() {
  var $el = $(this);
  var bottom = $el.position().top + ($el.outerHeight(true) - 30);

  //Check if exists some inactive elements to handle 1/2 click
  if ($('.inactive-leader').length) {
    //Target other leader-pic-wrapper elements, use sibling or the method you need based on your markup
    $(this).siblings().removeClass('inactive-leader')
    //...ACTIONS - This will act as the second click
  } else {
    $(this).siblings().addClass('inactive-leader')
    //...ACTIONS - This will act as the first click
  }
});

Upvotes: 2

Related Questions