JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<div id="container">
    <div id="tabs">
        <div class="sidebar">
            <p>Basic description</p>
            <div class="sidebar-img" style="display: block;">Image 1</div>
            <div class="sidebar-img">Image 2</div>
            <div class="sidebar-img">Image 3</div>
            <ul>
                <li><a href="#p1"><h5>Product 1</h5></a></li>
                <li><a href="#p2"><h5>Product 2</h5></a></li>
                <li><a href="#p3"><h5>Product 3</h5></a></li>
            </ul>
        </div><!--close sidebar-->

        <div class="content">
            <div id="p1">
                <p>Product 1 info</p>
            </div> <!-- close p1 -->
            <div id="p2">
                <p>Product 2 info</p>
            </div> <!-- close p2 -->
           <div id="p3">
                <p>Product 3 info</p>
            </div> <!-- close p3 -->
        </div><!-- close content -->
    </div><!-- close tabs -->
</div><!-- close container -->

CSS

.sidebar-img {
    display: none;
    width: 100px;
    height: 50px;
    background-color: lightgreen;
}

JavaScript

$('#tabs').tabs({
    activate: function (event, ui) {
        $('.sidebar-img').hide();
        $('.sidebar-img').eq( ui.newTab.index() ).show();
    }
});