CODEWITHSUNDEEP
javascriptjqueryhtmlslidetoggle
Justin Meli
Justin Meli

Reputation: 69

Adding a close button to a javascript animated panels

I am using the following javascript to slide open panels to the right when links are clicked.

jQuery(function($) {

$('a.panel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active'),
        animIn = function () {
            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        };

    if (!$target.hasClass('active') && $other.length > 0) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: -$this.width()
            }, 500, animIn);
        });
    } else if (!$target.hasClass('active')) {
        animIn();
    }
});

});

Now I also want to add a close button in every panel and when clicked, the panel should close/slide to the left.

I have this jsfiddle to work on

Any ideas please? Thanks.

Upvotes: 1

Views: 955

Answers (1)

Dipak
Dipak

Reputation: 12190

Here you go -

Working Demo

$('.close').click(function(){        
        $(this).closest('.panel').animate({
                    left: -200
                }, 500);
    });

Upvotes: 2

Related Questions