JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="main_menu_sub1">BOX 1</div>

<div class="main_menu_sub2">
BOX 2
</div>

<div class="main_menu_sub3">
BOX 3
</div>

<!-- data-content is to check do we have content or which boxes's content do we hv now -->
<div class="lower_menu" data-content="">BOX 4 (CONTENT TO BE REPLACED)</div>

<div class="main_menu_sub1_CONTENT">CONTENT FOR BOX 1</div>
<div class="main_menu_sub2_CONTENT">CONTENT FOR BOX 2</div>
<div class="main_menu_sub3_CONTENT">CONTENT FOR BOX 3</div>

CSS

.main_menu_sub1 {height:40px; background-color:red;}
.main_menu_sub2 {height:40px; background-color:green;}
.main_menu_sub3 {height:40px; background-color:blue;}

.main_menu_sub1_CONTENT {display:none; background-color:red;}
.main_menu_sub2_CONTENT {display:none; background-color:green;}
.main_menu_sub3_CONTENT {display:none; background-color:blue;}

JavaScript

$(document).ready(function(){
   var b4c = $('.lower_menu').html(); // content of box 4 so that we cn refer to it later
    $(".main_menu_sub1,.main_menu_sub2,.main_menu_sub3").click(function()
    {
      var active_content =  $(".lower_menu").data('content');
      var cls = $(this).attr('class');
      if(active_content == '')
      {
       $(".lower_menu").html($("."+cls+'_CONTENT').html())
       $(".lower_menu").data('content',cls);
       }
       else
       {
         if(active_content == cls)
         {
            $('.lower_menu').html(b4c).data('content','');
          }
          else
          {
            $(".lower_menu").html($("."+cls+'_CONTENT').html())
                $(".lower_menu").data('content',cls);
          }
       }
    });

});