Javascript 隐藏元素文本向左滑动

因此，如果你去这个网站：并点击他们的图标在标题，我希望它做同样的影响。我希望它做的是当我点击图标时，我希望图标向左滑动，而不是将另一个图标向右移动

以下是我到目前为止的情况：

//剧本

$(document).ready(function(){
    $('.clickable').on('click' , function() {
      $(this).find('.hid').toggleClass('showme');
    });
});

//css

//html

<div class="clickable"><i class="fa fa-phone"></i>
  <div class="hid">Phone Number</div>
</div>
<div class="clickable"><i class="fa fa-envelope"></i>
  <div class="hid">Email Here</div>
</div>

电话号码
在此处发送电子邮件

以下是JSFIDLE：

---

此处仅供参考

将其向右浮动，而不是向左浮动

<div class="click">
   <div class="clickable">
      <i class="fa fa-phone"></i>
      <div class="hid">Phone Number</div>
   </div>
   <div class="clickable">
      <i class="fa fa-envelope"></i>
      <div class="hid">Email Here</div>
   </div>
</div>

---

尝试将html更改为以下内容：

<div class="clickable"> 
    <div class="hid">Phone Number</div>
    <i class="fa fa-phone"></i>
</div>
<div class="clickable">
    <div class="hid">Email Here</div>
    <i class="fa fa-envelope"></i>
</div>

电话号码
在此处发送电子邮件

---

这将允许图元从左侧而不是右侧滑出。（如果这是您在这里要问的）

谢谢您的帮助。这是在正确的轨道上。基本上当你点击图标的时候。文字显示在右侧，图标移动到左侧。在你的例子中，文本显示在图标的左侧，我如何更改它？你能查看我的live站点以获取更新的代码吗？快到了，我只需要把文本放在右边。

.clickable .fa {
cursor: pointer;
font-size: 30px;
color: #394461; 
}
.clickable .fa, .hid {
float: right;
}
.hid {
width: 0;
overflow: hidden;
white-space: nowrap;
transition: all ease .35s;
-webkit-transition: all ease .35s;
-moz-transition: all ease .35s;
}
.showme {
width: 150px; 
}
.click {
float: left;
}
.clickable {
display: inline;
}

<div class="clickable"> 
    <div class="hid">Phone Number</div>
    <i class="fa fa-phone"></i>
</div>
<div class="clickable">
    <div class="hid">Email Here</div>
    <i class="fa fa-envelope"></i>
</div>