JSFiddle - React, Tailwind, and code Playground

by Saeed Abbaspour

HTML

<div class="container menu">
    <div class="row text-center">
        <div class="col-xs-3">
            <div class="btn btn-default" id="option_1">Option 1</div>
        </div>
        <div class="col-xs-3">
            <div class="btn btn-default" id="option_2">Option 2</div>
        </div>
        <div class="col-xs-3">
            <div class="btn btn-default" id="option_3">Option 3</div>
        </div>
        <div class="col-xs-3">
            <div class="btn btn-default" id="option_4">Option 4</div>
        </div>
    </div>
</div>
<div class="content">
    <div class="content_1" style="display:none">Content for Option 1
        <div class="back">Back</div>
    </div>
    <div class="content_2" style="display:none">Content for Option 2<div class="back">Back</div></div>
    <div class="content_3" style="display:none">Content for Option 3<div class="back">Back</div></div>
    <div class="content_4" style="display:none">Content for Option 4<div class="back">Back</div></div>
</div>

JavaScript

$(document).ready(function () {
    $(".btn").on("click", function () {
        $('.menu').hide();
        var idName = $(this).attr('id');
        //$('.content').html(idName);
        switch (idName) {
            case "option_1":
                $('.content_1').show();
                $(".back").on("click", function () {
                    $('.content_1').hide();
                    $('.menu').show();
                });
                break;
            case "option_2":
                $('.content_2').show();
                $(".back").on("click", function () {
                    $('.content_2').hide();
                    $('.menu').show();
                });
                break;
            case "option_3":
                $('.content_3').show();
                $(".back").on("click", function () {
                    $('.content_3').hide();
                    $('.menu').show();
                });
                break;
            case "option_4":
                $('.content_4').show();
                $(".back").on("click", function () {
                    $('.content_4').hide();
                    $('.menu').show();
                });
                break;
        }
    });
});