JSFiddle - React, Tailwind, and code Playground

by Andry Zirka

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="Links">
        <a id="one">FIRST</a>
        <a id="two">SECOND</a>
        <a id="three">THIRD</a>
    </div>
    <div id="BigBlock">
        <div id="firstBlock">
            <h1>Первый блок</h1>
            <p>some text111</p>
        </div>
        <div id="secondBlock">
            <h1>Второй блок</h1>
            <p>some text 2</p>
        </div>
        <div id="thirdBlock">
            <h1>Третий блок</h1>
            <p>Some text3</p>
        </div>
    </div>

CSS

#Links {
        margin: 30px;
        width: 150px;
        height: 200px;
        background-color: pink;
    }
    
    #Links a {
        display: block;
        margin: 5%;
        padding: 10px;
    }
    
    #BigBlock {
        left: 10%;
        width: 200px;
        height: 100px;
        background-color: yellow;
    }
    
    #firstBlock {
        background-color: red;
        color: #fff;
    }
    
    #secondBlock {
        background-color: blue;
        color: #fff;
    }
    
    #thirdBlock {
        background-color: green;
        color: #fff;
    }
    
    #firstBlock,
    #secondBlock,
    #thirdBlock {
    	position: absolute;
        display: none;
    }

JavaScript

$(function() {



     function chooseBlock() {

            $('#one').click( function(){ $('#BigBlock #firstBlock').toggle()} );

            $('#two').click( function(){$('#BigBlock #secondBlock').toggle()} );

            $('#three').click( function(){$('#BigBlock #thirdBlock').toggle()} );
                   

        } chooseBlock();
        
        
      });