Javascript 侧向切换-向右滑动打开，向左滑动关闭

我正在尝试一个横向切换-当用户单击它时，它将平滑地向右滑动，当用户想要关闭它时，它将向左滑动

我已经创建了我的JSFIDLE，但我不确定如何在用户单击时集成滑入滑出。 以下是现场直播：

HTML:

<div class="wrapper">
    <h3>Happening</h3>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam deserunt harum rem earum assumenda perspiciatis expedita. Aliquid distinctio tenetur fugiat qui recusandae obcaecati voluptates.</p>
        </div>
</div>

你可以试一下，指定你的方向。或者，您可以使用一些jQuery来移动元素：

$（'.wrapper'）。在（'click'，function（）上{
var pntLeft=$（'.wrapper'）.parent（）.offset（）.left，
chdLeft=$（'.wrapper'）.position（）.left，
Toggleft=（数学地板（chdLeft-pntLeft））==-450？“0px”：“-450px”；
$（'.wrapper'）.animate（{left:toggleLeft}，400）；
});
正文{
字体系列：“开放式Sans”，无衬线；
边缘顶部：50px；
}
.包装纸{
宽度：400px；
最小高度：150px；
位置：相对位置；
边框：2倍纯色橙色；
左边框：40px实心橙色；
填充：15px；
颜色：rgba（0,0,0,0.5）；
字体大小：小；
显示：内联块；
左：0px；
}
.包装纸h3{
字号：1rem；
颜色：白色；
文本转换：大写；
字母间距：3px；
位置：绝对位置；
底部：0；
左：0；
左边距：-30px；
-webkit变换：旋转（270度）；
-moz变换：旋转（270度）；
-ms变换：旋转（270度）；
-o变换：旋转（270度）；
变换：旋转（270度）；
-webkit转换原点：0；
-moz变换原点：0；
-ms变换原点：0；
-o变换原点：0；
变换原点：0；
}

发生
Lorem ipsum dolor sit amet，奉献精英

Lorem ipsum dolor sit amet，奉献精英。这是一个很好的解释。不动产的区别在于它是一种呕吐物

感谢您的解决方案。与其隐藏整件事，我只想切换内容，保持标题不变。谢谢！一个问题：我如何确保整个带有橙色边框的框中都有内容？所以它看起来是滑出滑入的？只需将边框样式添加到.content div，将它们从.wrapper中删除，就可以全部设置好了。当然，你也需要调整.content div的尺寸来排列。你能做到吗？更改边框样式以获得所需效果的快速示例：
    *, *:before, *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    body {
      font-family: 'Open Sans', sans-serif;
      margin-top: 50px;
    }


    .wrapper {
      width: 100%;
      min-height: 250px;
      position: relative;
      border: 2px solid orange;
      border-left: 40px solid orange;
      padding: 15px;
      color: rgba(0, 0, 0, 0.5);
      font-size: small;
      display: inline-block;
    }
    .wrapper h3 {
      font-size: 1rem;
      color: white;
      text-transform: uppercase;
      letter-spacing: 3px;
      position: absolute;
      bottom: 0;
      left: 0;
      margin-left: -30px;
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      transform: rotate(270deg);
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
    }