JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<script src="http://www.mba-ks.com/resources/js/jquery-css-transform.js"></script>
<script src="http://www.mba-ks.com/resources/js/jquery-animate-css-rotate-scale.js"></script>
<div style="background-color:rgba(10,10,10,.5);height:390px;">
    <div id="wrapper" class="home">
        <div id="image-slider">
            <div id="initial" style="display:none;">
                <img src="http://www.mba-ks.com/resources/css/images/bg-image-slider-1.jpg" alt="" class="initial-image" id="initial-1" width="883" height="310">
                <img src="http://www.mba-ks.com/resources/css/images/bg-image-slider-2.jpg" alt="" class="initial-image" id="initial-2" width="882" height="310" style="display: block;">
                <img src="http://www.mba-ks.com/resources/css/images/bg-image-slider-3.jpg" alt="" class="initial-image" id="initial-3" width="882" height="310" style="display: block; opacity: 0.5117798824168052;">
                <img src="http://www.mba-ks.com/resources/css/images/bg-image-slider-4.jpg" alt="" class="initial-image" id="initial-4" width="882" height="310" style="display: none;">
                <div class="initial-overlay">
                    <p>
                        <img src="http://www.mba-ks.com/resources/css/images/overlay-home-text.png" alt="" id="home-text-overlay" />
                    </p>
                </div>
                <!--.initial-overlay-->
            </div>
            <!--#initial-->
            <div class="slide" id="slide-1">
                <div class="inside">
                    <div class="overlay" style="background-color:rgba(190,57,154,.7);">
                        <ul>
                            <li><a href="#">Link</a>
                            </li>
                            <li><a href="#">Link</a>
                            </li>
                            <li><a href="#">Link</a>
                            </li>
                            <li><a href="#">Link</a>
                            </li>
   ...

CSS

/**** global ****/
 html {
    -webkit-font-smoothing: antialiased;
}
body {
    font-family: Arial, 'Helvetica Neue', Helvetica, Georgia, Sans-serif;
    font-size: 14px;
    background: #ebeff0;
    color: #5e5e5e;
    margin: 0px;
    padding: 0px;
}
/* homepage slider shelf accordion thing */
 .home div#image-slider {
    height:390px;
    width:960px;
    background:url(images/tubing.jpg) right top no-repeat;
    position:relative;
}
.home div#image-slider div#initial {
    position:relative;
    left:117px;
    top:0;
    width:883px;
}
.home div#image-slider div#initial img.initial-image {
    position:absolute;
    right:0;
    top:0;
}
.home div#image-slider div#initial img.initial-image#initial-1 {
}
.home div#image-slider div#initial img.initial-image#initial-2 {
}
.home div#image-slider div#initial img.initial-image#initial-3 {
}
.home div#image-slider div#initial img.initial-image#initial-4 {
}
.home div#image-slider div#initial img.initial-image#initial-5 {
}
.home div#image-slider div#initial div.initial-overlay {
    width:285px;
    height:260px;
    background:url(images/overlay-white.png) left top repeat;
    position:relative;
    padding:25px 25px;
    z-index:2;
    top:0;
    left:0;
}
.home div#image-slider div#initial div.initial-overlay p {
    font-weight:100;
    font-size:48px;
    line-height:52px;
    font-family:"helvetica neue", Helvetica, Arial, sans-serif;
    color:#6b4836;
}
.home div#image-slider div#initial div.initial-overlay p span {
    font-size:20px;
    font-weight:400;
    line-height:24px;
    color:#5a7c98;
    display:block;
    margin-top:4px;
    width:150px;
}
.home div#image-slider div.slide {
    width:39px;
    height:390px;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}
.home div#image-slider div.slide div.inside {
    width:883px;
    margin-left:-883px;
    height:390px;
    float:left;
    overflow:hidden;
    position:relative;
}
.home div#image-slider div.slide div.inside img {
   ...

JavaScript

$(function () {

    $("div.slide div.handle").click(function () {

        if ($(this).parent("div.slide").hasClass("opened")) {

            $(this).siblings().css({
                "opacity": "1"
            });
            var e = $(this).parent("div.slide");
            var p = e.prevAll("div.slide.opened");
            var ph = p.children("div.handle").children('.handle-arrow').children("img");
            var pi = p.children("div.inside");
            pi.animate({
                "margin-left": "-400px"
            }, 800, function () {
                ph.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)");
                pi.css({
                    "width": "39px"
                });
                pi.css({
                    "width": "0px",
                    "margin-left": "0px"
                });
                p.removeClass("opened");
            });
            //ph.rotate('0deg');

        } // else {
        //if (!$(this).parent("div.slide").hasClass("opened")) {
            $(this).siblings().css({
                "opacity": "1"
            });
            var e = $(this).parent("div.slide");
            var n = e.nextAll("div.slide:not(.opened)");
            var ei = e.children("div.inside");
            var ni = n.children("div.inside");
            var eh = e.children("div.handle").children('.handle-arrow').children("img");
            var nh = n.children("div.handle").children('.handle-arrow').children("img");
            $(this).parent("div.slide").siblings().children('.inside').css({
                "opacity": "0"
            });
            e.css({
                "width": "270px"
            });
            n.css({
                "width": "270px"
            });
            ei.animate({
                "width": "230px",
                "margin-left": "0px"
            }, 800);
            ni.animate({
                "width": "230px",
                "margin-left": "0px"
            }, 800);
           ...