JSFiddle - React, Tailwind, and code Playground

by alexstudioweb

HTML

<h1>Click on the <i>intentionally broken</i> thumbnails!</h1>

<div id="gallery">
    <div class="main">
        <div class="big show">
            <!-- image / video here -->
        </div>
        <div class="big">
            <!-- image / video here -->
        </div>
        <div class="big">
            <!-- image / video here -->
        </div>
    </div>
    <div class="thumbnails"> <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
 <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
 <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>

    </div>
</div>

CSS

.main {
    width:600px;
    height:300px;
    border:4px solid grey;
}
.thumbnails a {
    display:block;
    float:left;
    width:70px;
    height:70px;
    border:1px solid grey;
    margin:10px 10px 0 0;
}
.main .big {
    width:100%;
    height:100%;
    display:none;
}
.main .big.show {
    display:block;
}
.main .big:nth-child(1) {
    background:red;
}
.main .big:nth-child(2) {
    background:green;
}
.main .big:nth-child(3) {
    background:blue;
}

JavaScript

$('.thumbnails a').on('click', function () {
    var eq = $(this).index();

    $('.main .big').removeClass('show');
    $('.main .big').eq(eq).addClass('show');
});