jQuery - Toggle side menu

by katalin_2003

HTML

<div id='A'></div>
<div id='B'>
    <a href='javascript:' id='toggle'>Toggle</a>
</div>

CSS

#A, #B {
    position: absolute;
}
#A {
    top: 0px;
    width: 200px;
    bottom: 0px;
    background-color: lime;
}
#B {
    top: 0px;
    left: 200px;
    right: 0;
    bottom: 0px;
    background-color: pink;
}

JavaScript

(function ($) {
    $.fn.clickToggle = function (func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function () {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

$('#toggle').clickToggle(function () {
    /*    alert('First handler: ' + $(this).text());*/
    $('#A').animate({
        width: 0
    });
    $('#B').animate({
        left: 0
    });
}, function () {
    //    alert('Second handler: ' + $(this).text());
    $('#A').animate({
        width: 200
    });
    $('#B').animate({
        left: 200
    });
});