我有两个框，现在当用户点击LeftToRight的时候，我必须用LeftToRight框从左向右滑动内容，如果用户点击RightToLeft的话，我必须从右向左滑动div。
我尝试了下面的代码，但它不能正常显示时，点击按钮。我想像一个抽屉。

$(document).ready(function() {
  $("#clickLeft").click(function() {
    $(".leftoRightbox").animate({
      width: "toggle"
    });

    if (!$('.innerWrapper').hasClass("hidesecondbox")) {
      $('.innerWrapper').addClass('hidesecondbox');
    } else {
      $('.innerWrapper').removeClass('hidesecondbox');
    }
  });
  $("#clickRight").click(function() {
    $(".righttoLeftbox").animate({
      width: "toggle"
    });

    if (!$('.innerWrapper').hasClass("hidefirstbox")) {
      $('.innerWrapper').addClass('hidefirstbox');
    } else {
      $('.innerWrapper').removeClass('hidefirstbox');
    }
  });
});

.innerWrapper {
  text-align: center;
  display: flex;
  justify-content: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
}

.displayflex {
  display: flex;
  overflow: hidden;
}

.leftoRightbox,
.righttoLeftbox,
.goback,
.hidefirstbox .one,
.hidesecondbox .two {
  display: none;
}

.leftoRightbox,
.righttoLeftbox {
  height: 400px;
}

<div class="mainWrapper">
  <div class="innerWrapper">

    <div class="displayflex one">
      <div class="leftoRightbox">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <div class="leftoRight box" id="clickLeft">
        <h2>This is slide left to right</h2>
        <p class="goback">Go Back</p>
      </div>

    </div>

    <div class="displayflex two">
      <div class="righttoLeft box" id="clickRight">
        <h2>This is slide right to left</h2>
        <p class="goback">Go Back</p>
      </div>
      <div class="righttoLeftbox">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>

  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>