JSFiddle - React, Tailwind, and code Playground

HTML

<div id="border-right">
        <div id="right-toggler"></div>
        <div id="slide-border-right">
            <div id="border-right-end"></div>
            <div id="content-slider">
            </div>
        </div>
    </div>

CSS

/*Rechter Border Teil - Slider */
#border-right{
    position: absolute;
    right: 0px;
    margin-top: 35px;
    z-index:10;
    width: 220px;
    overflow: hidden;
}

#right-toggler{
    position: relative;
    height: 97px;
    width: 14px;
    background: red;
    background-repeat: no-repeat;
    float:left;
    cursor: pointer;
}

#slide-border-right{
    position: relative;
    margin-left: 14px;
    width:207px;
    height: 97px;
    border: 1px solid red;
}

#border-right-end{
    float:left;
    position: relative;
    height: 97px;
    width: 7px;
    background: url(../images/headborder-endright.png);
    background-repeat: no-repeat;
}

#content-slider{
    position: relative;
    height: 97px;
    width: 200px;
    background:url(../images/headborder.png);
    background-repeat: repeat-x;
    margin-left: 7px;
}

JavaScript

window.addEvent('domready', function() {
    var slideLeft = new Fx.Tween('border-right', {
        property: 'right',
        duration: 600,
        transition: 'bounce:out'
    });

    var state = -204; /* das der Bounceeffekt rechts nicht auftritt muss state länger werden?!*/

    $('right-toggler').addEvent('click', function() {
        state = (state == 0 ? -204 : 0);
        /* Entweder oder: http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder */
        slideLeft.start(state);
    });
});