CustomScrollbar correct resize to toggle?

Question

please tell me. How to properly resize for CustomScrollbar in Toggle? Now works only after two clicks..

http://jsfiddle.net/xmocartx/ktTKe/

    $( document ).ready(function() {
    var open = $('.open'),
    a = $('.location_cont').find('a.open');
    console.log(a.hasClass('active'));
    open.click(function(e){
    e.preventDefault();
    var $this = $(this),
        speed = 300;
    if($this.hasClass('active') === true) {
        $this.removeClass('active').next('.item_in').slideUp(speed);
    } else if(a.hasClass('active') === false) {
                $(".item_in ul").css("resize", true);
        $this.addClass('active').next('.item_in').slideDown(speed);
    } else {
        a.removeClass('active').next('.item_in').slideUp(speed);
        $this.addClass('active').next('.item_in').delay(speed).slideDown(speed);
    }
});
});

$( document ).ready(function() {
    $(".item_in ul").customScrollbar({
    skin: "default-skin", 
    hScroll: false,
    });
    $(document).on("click",function(){
                $(".item_in ul").customScrollbar("resize", true);
    });

});

Answer 1

The problem is that your if / else statements move away from using $(this) to using a vague reference to a instead.

Your first if statement is correct: if ($this.hasClass('active') === true)

But then the following else/if is incorrect: else if(a.hasClass('active') === false)

That should read else if($this.hasClass('active') === false)

Example: http://jsfiddle.net/ktTKe/3/