JSFiddle - React, Tailwind, and code Playground

by saes

HTML

<div id="left">
    <!--<a href="#target1" class="panel">Target 1</a><br/>*/
     <a href="#target2" class="panel">Target 2</a><br/>-->
    
    <button href="#target1" class="panel">Target 1</button>
    <button href="#target2" class="panel">Target 2</button>
</div>

<div id="right">
    <div class="panel" id="target1" style="background:green">Target 1</div>
    <div class="panel" id="target2" style="background:red">Target 2</div>
</div>

CSS

#left, #right {
    
    float: left;
    margin: 0 5px 0 0;
    width: 200px;
    height: 300px;
    overflow: hidden;
}

div.panel {
    position: relative;
    height: 100%;
    width: 100%;
    
}

JavaScript

jQuery(function($) {

    /*$('a.panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active');
        console.log($target);

        if (!$target.hasClass('active')) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.hide('active').animate({
                    left: $this.width()
                }, 500);
            });

            $target.show('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        }
    });*/
    
    $(".panel").click(function() {
        var $target = $($(this).attr("href")),
            $other = $target.siblings('.active');
        
        console.log($target);
        
        if (!$target.hasClass('active')) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.hide('active').animate({
                    left: $this.width()
                }, 500);
            });

            $target.show('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        }
    });

});