Multi slideout divs

It’s an exact replacement for .toggle. Include the plugin after jQuery and then replace toggle by toggleClick.

by Akram kamal

HTML

<div class="row">
    <div class="span12">
        <div id="slideOut" class="clearfix">
            <div id="slideContent">You ain't seen me, right?</div>
            <div id="slideClick"></div>
        </div>
        <div id="slideOut-2" class="clearfix">
            <div id="slideContent-2">You ain't seen me, right?</div>
            <div id="slideClick-2"></div>
        </div>
    </div>
</div>

CSS

#slideOut {
    position:absolute;
    width:310px;
    height:80px;
    top:45%;
    left:-290px;
}
#slideClick {
    float:right;
    height:80px;
    width:20px;
    background:#EE8D40;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
#slideContent {
    background:#AAA;
    width: 280px;
    height: 50px;
    padding: 30px 0 0 10px;
    float:left;
    color: #EFEFEF;
    font-size: 17px;
    font-weight: bold;
    font-family: arial, sans-serif;
    text-transform: uppercase;
    text-align: center;
}
#slideOut-2 {
    position:absolute;
    width:310px;
    height:80px;
    top:65%;
    left:-290px;
}
#slideClick-2 {
    float:right;
    height:80px;
    width:20px;
    background:#EE8D40;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
#slideContent-2 {
    background:#AAA;
    width: 280px;
    height: 50px;
    padding: 30px 0 0 10px;
    float:left;
    color: #EFEFEF;
    font-size: 17px;
    font-weight: bold;
    font-family: arial, sans-serif;
    text-transform: uppercase;
    text-align: center;
}
#lookHere {
    font-family: DejaVuSansBook, Sans-Serif;
}
#lookHere h1, #lookHere h2 {
    font-size: 20em;
    padding: 0;
    margin: 0;
    color: #AAAAAA;
}
#lookHere h2 {
    font-size: 1.5em;
    margin: 0 0 0 30px;
}
#lookHere span.orange {
    color: #EE8D40;
}
#lookHere span.green {
    color: #9AC941;
}

JavaScript

/* verbatim from https://github.com/JakeCigar/toggleClick/blob/master/toggleClick.js */
;
(function ($) {
    $.fn.toggleClick = function () {
        var functions = arguments;
        return this.each(function () {
            var iteration = 0;
            $(this).click(function () {
                functions[iteration].apply(this, arguments);
                iteration = (iteration + 1) % functions.length;
            })
        })
    }
})(jQuery);


$('#slideClick,#slideClick-2').toggleClick(function () {
    $(this).parent().animate({
        left: '0px'
    }, {
        queue: false,
        duration: 500
    }).siblings().animate({
        left: '-290px'
    }, {
        queue: false,
        duration: 500
    });
},

function () {
    $(this).parent().animate({
        left: '-290px'
    }, {
        queue: false,
        duration: 500
    });
});