CODEWITHSUNDEEP
javascriptslide
liljacoconut
liljacoconut

Reputation: 13

Sliding Panels with JavaScript

This example I've found is exactly what I was looking for: http://jsfiddle.net/sg3s/RZpbK/
Thx to the author sg3s

jQuery(function($) {

    $('a.panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active'),
            animIn = function () {
                $target.addClass('active').show().css({
                    right: -($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();
        }
    });

});

But I got a little problem with it. I would like the panels to "open" and "close" from the right. I'm not familiar with javascript and I'm not able to tweak it properly.

Can anyone help me with this ?

Upvotes: 1

Views: 1501

Answers (3)

nullSharp
nullSharp

Reputation: 331

Based on your previous comment, this is more what you want?

http://jsfiddle.net/RZpbK/847/

Just changed it so animIn executed right away instead of as a callback after the fadeout was done.

$this.removeClass('active').animate({
                left: -$this.width()
            }, 500);
            animIn();

Upvotes: 0

TheBrain
TheBrain

Reputation: 5608

Just replace the left: -($target.width()) with left: $target.width() in both places

Upvotes: 0

nullSharp
nullSharp

Reputation: 331

Like this?

http://jsfiddle.net/RZpbK/845/

All I did was modify the animIn to:

            animIn = function () {
            $target.addClass('active').show().css({
                left: +($target.width())
            }).animate({
                left: 0
            }, 500);
        };

Upvotes: 1

Related Questions