JSFiddle - React, Tailwind, and code Playground

by rcravens

HTML

<div class="work_two_third_column_copy">
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSjBy_HETmqO9HXGxeTDu_X9gioF6QnAHPY05q0NLyhMt7u_cEk6A" />
</div>


<div class="one_third_column_right">
    
    <div class="one_sixth_column">
        <div class="one_sixth_column_copy">
            <div class="work_info">&nbsp;</div>
        </div>
    </div>
    
    <div class="one_sixth_column_thumbs">
        <ul class="thumbs">
            <li>
                <a href="http://t1.gstatic.com/images?q=tbn:ANd9GcSjBy_HETmqO9HXGxeTDu_X9gioF6QnAHPY05q0NLyhMt7u_cEk6A">
                    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSjBy_HETmqO9HXGxeTDu_X9gioF6QnAHPY05q0NLyhMt7u_cEk6A" />
                    <span class="tip">number one desc</span>
                </a>
            </li>
            <li>
                <a href="http://t2.gstatic.com/images?q=tbn:ANd9GcTw38drT_ZStGh5souEsDI0-8dX0oX3PTwL9-uJ4sG524phMDuq">
                    <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTw38drT_ZStGh5souEsDI0-8dX0oX3PTwL9-uJ4sG524phMDuq" />
                    <span class="tip">number two desc</span>
                </a>
            </li>
            <li>
                <a href="http://t1.gstatic.com/images?q=tbn:ANd9GcSn9H7RjZBf8SMG6J7Adz4OcHZgJvEOj0VQHHGny1RF3UJ4ZU8g">
                    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSn9H7RjZBf8SMG6J7Adz4OcHZgJvEOj0VQHHGny1RF3UJ4ZU8g" />
                    <span class="tip">number three desc</span>
                </a>
            </li>
            <li>
                <a href="http://t1.gstatic.com/images?q=tbn:ANd9GcTjiymRqAfROEh3rLWuzWNO49UORlp1LfnE2ArUYAijm_Yu61Xv">
                    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTjiymRqAfROEh3rLWuzWNO49UORlp1LfnE2ArUYAijm_Yu61Xv" />
                    <span class="tip">number four desc</span>
                </a>
            </li>
        </ul>
    </div>
    
</div>

CSS

.work_two_third_column_copy{
    width: 300px;
    display: inline-block;
}
.one_third_column_right{
    width: 100px;
    display: inline-block;  
}

.thumbs a span{
    display: none;   
}

JavaScript

$(document).ready(function() {

    $("ul.thumbs li a").click(function(e) {
        e.preventDefault();

        var mainImage = $(this).attr("href"); //Find Image Name
        $(".work_two_third_column_copy img").attr({
            src: mainImage
        });

        var tip = $(this).find('span').html();
        $(".one_sixth_column_copy .work_info").html(tip);


    });


});