JSFiddle - React, Tailwind, and code Playground

by lvo811

HTML

<select>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>
<div class="thumbnails">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>
<div class="mainimage">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

CSS

.red   { background:red; }
.green { background:green; }
.blue  { background:blue; }

.thumbnails {
    margin-top:10px;
}

.thumbnails > div {
    width:50px;
    height:50px;
    display:inline-block;
    float:left;
    margin-right:10px;
}

.thumbnails > div:last-child {
    margin:0;
}

.thumbnails > div.selected {
    border:2px solid black;
    width:46px;
    height:46px;
}

.mainimage {
    clear:both;
    padding-top:10px;
}

.mainimage > div {
    width:200px;
    height:200px;
    display:none;
}

JavaScript

$(function(){
    function changeImage(image)
    {
        // hide all mainimages          
        $('div.mainimage > div ').hide();
        
        // show the selected image
        $('div.mainimage > div.' + image).show();        
    }
    
    $('select > option').click(function(){
        $('select').change();
    });
    
    $('select').change(function(){       
        // get the selected option
        var selected = $('select option:selected');
        
        // remove all "selected" classes from thumbnails
        $('.thumbnails > div').removeClass('selected');
        
        // add a "selected" class to the thumbnail
        $('.thumbnails > div.' + selected.val()).addClass('selected');   
        
        changeImage(selected.val());   
    });
    
    $('.thumbnails > div').click(function(){
        // remove all "selected" classes from thumbnails
        $('.thumbnails > div').removeClass('selected');
        
        // add a "selected" class for this thumbnail
        $(this).addClass('selected');
        
        // get the color
        var color = $(this).attr('class').split(' ')[0];
        
        // change the select value
        $('select').val(color);
        
        changeImage(color);
    });
});