JSFiddle - React, Tailwind, and code Playground

by NinjaSk8ter

HTML

<div class="main_image">
    <img src="http://www.sohtanaka.com/web-design/examples/image-rotator/banner1.jpg" alt="" />
    <div class="desc">
        <a href="#" class="collapse">Close Me!</a>
        <div class="block">
            <h2>Title</h2>
            <small>Date</small>
            <p>Copy</p>
        </div>
    </div>
</div>
<div class="image_thumb">
    <ul>
        <li>
            <a href=http://www.sohtanaka.com/web-design/examples/image-rotator/banner1.jpg>
            <img src="http://www.sohtanaka.com/web-design/examples/image-rotator/banner1_thumb.jpg" alt="Image Name" />
            </a>
            <div class="block">
                <h2>Slowing Down</h2>
                <small>04/10/09</small>
                <p>1st description</p>
            </div>
        </li>
        <li>
            <a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner2.jpg">
            <img src="http://www.sohtanaka.com/web-design/examples/image-rotator/banner2_thumb.jpg" alt="Organized Food Fight" />
            </a>
            <div class="block">
                <h2>Organized Food Fight</h2>
                <small>04/11/09</small>
                <p>2nd description</p>
            </div>
        </li>        
        <li>
            <a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner3.jpg">
            <img src="http://www.sohtanaka.com/web-design/examples/image-rotator/banner3_thumb.jpg" alt="Endangered Species" />
            </a>
            <div class="block">
                <h2>Endangered Species</h2>
                <small>04/12/09</small>
                <p>3rd description</p>
            </div>
        </li>  
    </ul>
</div>

CSS

.main_image {
    width: 598px;
    height: 456px;
    float: left;
    background: #333;
    position: relative;
    overflow: hidden; 
    /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
    color: #fff;
}
.main_image h2 {
    font-size: 2em;
    font-weight: normal;
    margin: 0 0 5px;
    padding: 10px;
}
.main_image p {
    font-size: 1.2em;
    line-height: 1.6em;
    padding: 10px;
    margin: 0;
}
.block small { 
    /*--We'll be using this same style on our thumbnail list--*/
    font-size: 1em;
    padding: 0 0 0 20px;
    background: url(icon_calendar.gif) no-repeat 0 center;
}
.main_image .block small {
    margin-left: 10px;
}
.main_image .desc{
    position: absolute;
    bottom: 0;
    left: 0; /*--Stick the desc class to the bottom of our main image container--*/
    width: 100%;
    display: none; /*--Hide description by default, if js is enabled, we will show this--*/
}
.main_image .block{
    width: 100%;
    background: #111;
    border-top: 1px solid #000;
}
.main_image a.collapse { 
    /*--This is our hide/show tab--*/
    background: url(btn_collapse.gif) no-repeat left top;
    height: 27px;
    width: 93px;
    text-indent: -99999px;
    position: absolute;
    top: -27px;
    right: 20px;
}
.main_image a.show {
    background-position: left bottom;
}
.image_thumb {
    float: left;
    width: 299px;
    background: #f0f0f0;
    border-right: 1px solid #fff;
    border-top: 1px solid #ccc;
}
.image_thumb img {
    border: 1px solid #ccc;
    padding: 5px;
    background: #fff;
    float: left;
}
.image_thumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.image_thumb ul li{
    margin: 0;
    padding: 12px 10px;
    background: #f0f0f0 url(nav_a.gif) repeat-x;
    width: 279px;
    float: left;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    border-right: 1px solid #ccc;
}
.image_thumb ul li.hover { 
    /*--Hover State--*/
    background: #ddd;
    cursor:...

JavaScript

$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

$(".image_thumb ul li:first").addClass('active'); //Add the active class (highlights the very first list item by default)
$(".image_thumb ul li").click(function(){
    //Set Variables
    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
    var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
    var imgDesc = $(this).find('.block').html();  //Get HTML of the "block" container
    var imgDescHeight = $(".main_image").find('.block').height(); //Find the height of the "block"

    if ($(this).is(".active")) {  //If the list item is active/selected, then...
        return false; // Don't click through - Prevents repetitive animations on active/selected list-item
    } else { //If not active then...
        //Animate the Description
        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { //Pull the block down (negative bottom margin of its own height)
            $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 ); //swap the html of the block, then pull the block container back up and set opacity
            $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag)
        });
    }
    //Show active list-item
    $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all list-items
    $(this).addClass('active');  //Add class of 'active' on the selected list
    return false; 

}) .hover(function(){ //Hover effects on list-item 
    $(this).addClass('hover'); //Add class "hover" on hover 
    }, function() {
    $(this).removeClass('hover'); //Remove class "hover" on hover out
});

$("a.collapse").click(function(){
    $(".main_banner .block").slideToggle(); //Toggle the description (slide up and down)
    $("a.collapse").toggleClass("show"); //Toggle the class name of...