JSFiddle - React, Tailwind, and code Playground

HTML

<div id="doors">
    <div class="door main">
        <a href="#" class="door1-trigger">Door 1</a>
        <a href="#" class="door2-trigger">Door 2</a>
    </div>
    <div class="door door1">
        Door 1
        <a href="#" class="main-trigger">Back to Main</a>
    </div>
    <div class="door door2">
        Door 2
        <a href="#" class="main-trigger">Back to Main</a>
    </div>
</div>

CSS

.door { float:left; display: none; }​
.main { display: block; }​

JavaScript

$(function() {
    
    $(".door1-trigger").click(function() {
      $(".door").hide();
      // $(".door1").show("slide", { direction: "right" }, 1000);
      return false;
    });
    $(".door2-trigger").click(function() {
      $(".door").hide();
      $(".door2").show("slide", { direction: "left" }, 1000);
      return false;
    });
    $(".main-trigger").click(function() {
      $(".door").hide();
      if ($('.door1:visible')) {
          $(".main").show("slide", { direction: "left" }, 1000);
      } else {
          $(".main").show("slide", { direction: "right" }, 1000);
      }
      return false;
    });
    
});