我认为jQuery UI's .toggle method不适合这项工作。.toggle()用于显示/隐藏单个元素，而不是将网格中的内容单元格向左或向右移动。
我认为正确的概念模型是想象一个两倍于视口宽度的滑块框。它包含两个并排的幻灯片，每个幻灯片的宽度为滑块的一半（或与视口的宽度完全相同）。一次只能看到一张幻灯片。导航按钮将更改滑块的margin-left属性，以便第一张或第二张幻灯片处于视图中。
这将需要重新处理现有的HTML结构。例如，#backer箭头需要进入第二张幻灯片的内部。我们可以使用一个负的margin-top来显示在与原始位置大致相同的位置。
我们还需要将overflow: hidden添加到滑块的容器中（在本例中为.superFlex），以便看不到视图外的幻灯片。
生成的代码如下所示：

$('#cu').click(function() {
  $('#Slider').animate({
    marginLeft: '-100%'
  });
});

$('#backer').click(function() {
  $('#Slider').animate({
    marginLeft: '0'
  });
});

#profile {
  width: 75%;
  max-width: 400px;
  height: 100%;
  background-color: rgba(37, 76, 91, 1);
  position: fixed;
  top: 0;
  display: none;
  right: 0;
}

#backer {
  cursor: pointer;
  font-size: min(3.0vw, 22px);
  position: absolute;
  margin-left: 5px;
  margin-top: -155px;
}

.superFlex,
.profileBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.usercon,
#changeName {
  width: 100%;
  height: 40px;
  display: flex;
  background-color: #4E748B;
  font-size: 14px;
  margin-top: 2px;
  cursor: pointer;
}

.profileBox {
  width: 100%;
}

.slider {
  align-self: flex-start;
  display:flex;
  margin-left: 0;
  width: 200%;
}

.slide {
  width: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="profile" style="display: block;">
  <div class="superFlex" style="overflow:hidden;">
    <div class="first">
      <img src="https://i.stack.imgur.com/eSStq.png?s=256&g=1" height="100">
      <p style="margin:0;">TEXT</p>
    </div>
    
    <div class="slider" id="Slider">
      <div class="slide">
        <div class="profileBox">
          <p class="general">Account settings</p>
          <div class="usercon" id="cu">
            <p>Change username</p>
          </div>
        </div>
      </div>
      <div class="slide">
        <form id="changeName" class="swiped">
          <p class="general">Username</p>
        </form>
        <i id="backer" class="fa fa-arrow-left" aria-hidden="true"></i>
      </div>
    </div>
    
  </div>
</div>