jquery toggle needs 2 clicks

Question

Here's a jsfiddle:

http://jsfiddle.net/FVuvC/

In the jquery, it makes the green triangle pull out the container then the red triangle push it back in, but it requires 2 clicks in order for that to happen. How do I go about making it so that it only needs 1 click on both triangles?

$(function () {
    $("#clickmeright, #clickmeleft").toggle(function () {
        $(this).parent().animate({
            right: '0px'
        }, {
            queue: false,
            duration: 500
        });
    }, function () {
        $(this).parent().animate({
            right: '-170px'
        }, {
            queue: false,
            duration: 500
        });
    });
});

I've looked up other questions on the site but I still don't get it. Such as:

JQuery Toggle Issue, Requires Two Clicks

Toggle function requiring 2 clicks

The most I've gotten from them is that I have to change the toggle to a click function instead. So that should show you where I'm at with understanding this stuff. Also, could someone recommend some good sources for learning this?

Answer 1

This happen because event handler toggles function not on both element, but on each of them separately (you would not wonder if $('#e1,#e2').click(function) will not fire event on both elements if you click on e1 ), to workaround I would to make something like:

$(function () {
    var $clickmeright=$("#clickmeright");
    $("#clickmeleft").click(function() {
        $clickmeright.click();
    })
    $clickmeright.toggle(function () {
        $(this).parent().animate({
            right: '0px'
        }, {
            queue: false,
            duration: 500
        });
    }, function () {
        $(this).parent().animate({
            right: '-170px'
        }, {
            queue: false,
            duration: 500
        });
    });
});

http://jsfiddle.net/oceog/FVuvC/1/