JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div id="work">
        <ul id="gallery">
          <li><a href="#workDiv_retail" class="toggleWidth" >RETAIL</a></li>
          <li><a href="#workDiv_healthcare" class="toggleWidth">HEALTH CARE</a></li>
          <li><a href="#workDiv_power_infrastructure" class="toggleWidth">POWER &amp; INFRASTRUCTURE</a></li>
          <li><a href="#workDiv_manufacturing" class="toggleWidth">MANUFACTURING</a></li>
          <li><a href="#workDiv_food_beverage" class="toggleWidth">FOOD &amp; BEVERAGE</a></li>
          <li><a href="#workDiv_cultural_community" class="toggleWidth">CULTURAL &amp; COMMUNITY</a></li>
        </ul>
        <div id="workDiv">
          <div id="workDiv_retail"><span class="gallery_img"><a title="You can add caption to pictures." href="images/work/bluewater_bridge/besterd_bluewater1.jpg" rel="prettyPhoto[pp_gal6]"><img src="images/work/bluewater_bridge/besterd_bluewater1_thumb.jpg" /></a></span><span class="gallery_img_hide"><a title="You can add caption to pictures." href="images/work/bluewater_bridge/besterd_bluewater3.jpg" rel="prettyPhoto[pp_gal6]"><img src="images/work/bluewater_bridge/besterd_bluewater3_thumb.jpg" /></a></span><span class="gallery_img_hide"><a title="You can add caption to pictures." href="images/work/bluewater_bridge/besterd_bluewater4.jpg" rel="prettyPhoto[pp_gal6]"><img src="images/work/bluewater_bridge/besterd_bluewater4_thumb.jpg" /></a></span><span class="gallery_img_hide"><a title="You can add caption to pictures." href="images/work/bluewater_bridge/besterd_bluewater5.jpg" rel="prettyPhoto[pp_gal6]"><img src="images/work/bluewater_bridge/besterd_bluewater5_thumb.jpg" /></a></span><span class="gallery_img_hide"><a title="You can add caption to pictures." href="images/work/bluewater_bridge/besterd_bluewater6.jpg" rel="prettyPhoto[pp_gal6]"><img src="images/work/bluewater_bridge/besterd_bluewater6_thumb.jpg" /></a></span><span class="gallery_img_hide"><a title="You can add caption to pictures."...

CSS

#our_work {
    font-family: CopperplateGothicStd31AB, Verdana, Geneva, sans-serif;
    width: 792px;
    padding: 15px;
    position: relative;
    left: 23px;
    top: 10px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 0px;
}
#our_work h1 {
    color: #FFF;
    font-size: 24px;
    text-shadow: 0px 3px 3px #000000;
    text-transform: capitalize;
    margin: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
}
#our_work p {
    font-size: 14px;
    text-shadow: 0px 2px 2px #333333;
    color: #FFF;
    line-height: 16px;
    margin: 0px;
    padding: 0px;
}
#gallery {
    padding: 0px;
    position: absolute;
    float: left;
    margin: 0px;
    width: 225px;
}
#gallery li {
    width: 225px;
    height: 25px;
    color: #000;
    list-style-type: none;
    background-color: #CCC;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    line-height: 25px;
    text-align: right;
    padding-top: 0px;
    padding-right: 15px;
    padding-bottom: 0px;
    padding-left: 0px;
    text-shadow: 0px 1px 2px #666666;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #999;
}
#gallery li:hover {
    background-color: #C00;
    color: #FFF;
    text-shadow: 0px 1px 2px #000000;
}
#work {
    padding: 0px;
    height: 250px;
    width: 825px;
    position: relative;
    background-color: #CCC;
    border: thin solid #999;
    margin: 0px;
    left: 23px;
    top: 10px;
    background-image: url(/images/fpo.gif);
    background-repeat: no-repeat;
    background-position: 246px;
}
#workDiv_retail, #workDiv_healthcare, #workDiv_power_infrastructure, #workDiv_manufacturing, #workDiv_food_beverage, #workDiv_cultural_community {
    position: absolute;
    width: 590px;
    background-color: #333;
    height: 250px;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 235px;
    display: none;
    overflow: hidden;
}
#work h3 {
   ...

JavaScript

$('.toggleWidth').click(function(e) {
    e.preventDefault();
    var id = $(this).attr("href");
    $("#workDiv > div").slideLeft();
    $(id).slideToggleWidth();     
});


jQuery.fn.extend({
    slideRight: function() {
        return this.each(function() {
            $(this).animate({
                width: 'show'
            });
        });
    },
    slideLeft: function() {
        return this.each(function() {
            $(this).animate({
                width: 'hide'
            });
        });
    },
    slideToggleWidth: function() {
        return this.each(function() {
            var h = $(this);
            if (h.css('display') == 'none') {
                h.slideRight();
            } else {
                h.slideLeft();
            }
        });
    }
});