CODEWITHSUNDEEP
javascripthtml
Justin Meli
Justin Meli

Reputation: 69

Modifying close buttons in 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();
    }
});

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

});

When a close button is clicked the panel is closed.

What I need is that when a close button is clicked, the 'ACTIVE' class is removed from the panel. And IF possible, the anchor is removed.

This is because if the user clicks on the same panel link again it won't open.

See this jsfiddle

Thanks

Upvotes: 0

Views: 188

Answers (1)

jtheman
jtheman

Reputation: 7491

Just add .removeClass('active') to your close function, see http://jsfiddle.net/RZpbK/479/ 

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

As I see it then the function works as expected, but I cant understand why you would want to remove the anchor? Then it cant be closed the next time you open it?

Upvotes: 2

Related Questions