jQuery - Different function on second click

Question

I'm trying to create a curtain Opening & Closing effect. But for some reason I can't make my curtains close once they're opened.

Here's what I have so far: http://jsfiddle.net/ssc3z1tf/

I've tried quite a few different ways, adding and removing classes, toggling classes and here I've used rels.

$(document).ready(function () {
             $('.curtain').click(function(){
                if ($('.curtain').attr('rel', 'open')){
                        $('.curtainLeft').animate({"left":"-400px"}, "slow");
                        $('.curtainRight').animate({"right":"-400px"}, "slow");
                        $('.curtain').attr('rel', 'closed');

                    } else if ($('.curtain').attr('rel', 'closed')){

                        $('.curtainLeft').animate({"left":"-0px"}, "slow");
                        $('.curtainRight').animate({"right":"-0px"}, "slow");
                        $('.curtain').attr('rel', 'open');
                    }
            });
        });

Any help would be great! I'm lost! Thanks!!

Answer 1

Change

if ($('.curtain').attr('rel', 'open')){

to

if ($('.curtain').attr('rel') == 'open') {

And do the same for the second if statement. The .attr(name, value) will always set the attribute to the specified value, whereas .attr(name) will simply return the value

Updated Fiddle