Affecting only one element with jQuery toggle

Question

So I have got this code

$('.item').click(function () {
    if ($(".secondary", this).is(":hidden")) {
        $(".primary", this).toggle('slide', {
            direction: 'right'
        }, 500, function () {
            $('.secondary', this).toggle('slide', {
                direction: 'left'
            }, 500);
        });

    }
});

Current behavior is that when I click .item, .primary slides to the right, but .secondary doesn't slide in at all.

Fiddle: http://jsfiddle.net/zm3zp6ax/

Answer 1

$('.item').click(function () {
    var $this = $(this);
    if ($(".secondary", this).is(":hidden")) {
        $(".primary", $this).toggle('slide', {
            direction: 'right'
        }, 500, function () {
            $('.secondary', $this).toggle('slide', {
                direction: 'left'
            }, 500);
        });

    }
});

DEMO