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: 300px;
        background-color: yellow;
    }
    
    #firstBlock {
        background-color: red;
        color: #fff;
    }
    
    #secondBlock {
        background-color: blue;
        color: #fff;
    }
    
    #thirdBlock {
        background-color: green;
        color: #fff;
    }
    
    #firstBlock,
    #secondBlock,
    #thirdBlock {
        display: none;
    }

JavaScript

$(function() {



        function chooseBlock() {

            if ($('one').click()) {
                $('#BigBlock #firstBlock').toggle()
            } else if ($('two').click()) {
                $('#BigBlock #secondBlock').toggle()

            } else if ($('tree').click()) {
                $('#BigBlock #thirdBlock').toggle()

            } else { $('#BigBlock').hide()}         

        }chooseBlock();