Question

So I have a web page where you can select text boxes and close them by clicking the background or the boxes again:

http://hashtag.ly/#NASCAR

So I’ve got some code that will add or remove classes based on what is clicked:

$('li').click(function(){
    _this = $(this)
    if (_this.hasClass('active')) {
        //Close it if you clicked on that's already open
        _this.removeClass('active')
    } else if ($('li.active').length !== 0) {
        //close one and open another one you clicked
        _this.siblings().removeClass('active')
        _this.siblings().bind('webkitTransitionEnd oTransitionEnd transitionend',function(){
            _this.addClass('active');
        });
    } else {
        //open the first one
        _this.addClass('active');
    }

});

//Close when clicking the background
$('#close').click(function(){
    $('.active').removeClass('active')
});

The issue: When you open a box and click it again it’s supposed to close itself, like the first if statement says. But if you switch between text boxes 3 times (utilizing the seconds if statement), and try to close the third text box, it just reopens itself over and over again. Any clue on why it does this?

Thanks!

Answer 1

Got it figured out…

The transition event handler doesn’t unbind even if you’re in a different if statement. Did a little reading, moved the .bind() and .unbind() to .on() and .off() as suggested by the creators of jQuery and added the off statement to the end of the on statement’s function.

Here’s the code:

$('li').click(function(){
    _this = $(this)
    if (_this.hasClass('active')) {
        //Close it if you clicked on that's already open
        _this.removeClass('active')
    } else if ($('li.active').length !== 0) {
        //close one and open another one you clicked
        _this.siblings().removeClass('active')
        _this.siblings().on('webkitTransitionEnd oTransitionEnd transitionend',function(){
            _this.addClass('active');
            _this.siblings().off('webkitTransitionEnd oTransitionEnd transitionend');
        });
    } else {
        //open the first one
        _this.addClass('active');
    }

});

//Close when clicking the background
$('#close').click(function(){
    $('.active').removeClass('active')
});