CODEWITHSUNDEEP
javascriptjquerytoggle
Anton
Anton

Reputation: 81

close always one open element jquery toggle

Tell me, please, now everything works fine, but one item remains open, close it?

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

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

Upvotes: 1

Views: 337

Answers (2)

user3401335
user3401335

Reputation: 2405

i have modified in the fiddle

http://jsfiddle.net/Vym2M/

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

cancel

    if ($('.open').hasClass('active') === true) {
        $('.open').removeClass('active').next('.item_in').slideUp(speed);
    }

and use $(this) instead variable $this.

remove also the last else because isn't necessary

Upvotes: 1

Musa
Musa

Reputation: 97672

Don't remove the active class when you slide up so you can check to see if it if the current element that was clicked.

open.on('click',function (e) {
    e.preventDefault();
    var $this = $(this),
        speed = 300;
    if ($('.open').hasClass('active') === true) {
        $('.open').next('.item_in').slideUp(speed);
    }
    if ($this.hasClass('active') === true) {
        $this.removeClass('active').next('.item_in').slideUp(speed).find('ul').customScrollbar("resize", true);
    } else {
        $(".item_in ul").css("resize", true);
        $('.open').removeClass('active');
        $this.addClass('active').next('.item_in').slideDown(speed).find('ul').customScrollbar("resize", true);
    } 
});

http://jsfiddle.net/ktTKe/4/

Upvotes: 0

Related Questions