.addClass()

by bridget_kilgallon

HTML

<body> 
 
    <div id="tray" class="tray">
        <a id="tray-open">=</a>
        <a id="tray-close" class="hide">||</a>
        <span class="fields">
            <a class="organize-open">1</a>
            <a>2</a>
            <a>3</a>
            <a>4</a>
            <a>5</a>
        </span>
    </div>
       
    <div id="tray-interior" class="tray">
        <a>collapse</a>
        <span class="fields">
            <a>one</a>
            <a>two</a>
            <a>three</a>
            <a>four</a>
            <a>five</a>
        </span>
    </div>
       

    


</body>

CSS

body {
    font-family: arial;
}

body #tray-interior {
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    transition: all .25s ease-in;
}


a {
    display: block;
}

body a.hide {
    display: none;
}

body a.show {
    display: block;
}

body div {
    position: absolute; 
    height: 100%;
}

body div a {
    display: block;
    padding: 10px;
    color: #ECF3FC;
}


body #tray-interior {
    background-color: #173C60;
    z-index: 0;
    left: -75px;
}

body #tray {
    background-color: #173C60;
    z-index: 1;
}


body #tray-interior.tray-expand{ 
    left: 20px;
}




body div.tray span.fields a:nth-child(1) {
    background-color: rgba(27, 117, 188, 1)
}
body div.tray span.fields a:nth-child(2) {
    background-color: rgba(27, 117, 188, .8)
}
body div.tray span.fields a:nth-child(3) {
    background-color: rgba(27, 117, 188, .6)
}
body div.tray span.fields a:nth-child(4) {
    background-color: rgba(27, 117, 188, .4)
}
body div.tray span.fields a:nth-child(5) {
    background-color: rgba(27, 117, 188, .2)
}

JavaScript

$('#tray-open').click(function() {
    $('body #tray-interior').addClass("tray-expand");
    $('body #tray-open').addClass("hide");
    $('body #tray-close').addClass("show");
});


$('#tray-close').click(function() {
    $('body #tray-interior').removeClass("tray-expand");
    $('body #tray-close').removeClass("show");
    $('body #tray-open').removeClass("hide");
});