单击以删除html和javascript

我想有两个并排的div，第一个包含一个信息表，另一个包含两个按钮delete和edit。我想要100%占据屏幕的第一个div，第二个div将从屏幕上消失，然后我用表格单击第一个div后，第二个div将滑出并按下第一个div，并显示删除和编辑按钮

<div id="div1">
   <table>
      <tr>
         <td>Some Information</td>
      </tr>
   </table>
</div>
<div id="div2">
   <button id="delete"></button>
   <button id="edit"></button>
</div>
//Javascript Code
<script>
   $(document).ready(function(){
      $('#div1').click(function {
         //slide div2 out and push div1 to the left to show delete and edit buttons
      });
   });
</script>

一些信息
//Javascript代码
$（文档）.ready（函数（）{
$（'#div1'）。单击（函数）{
//将div2滑出并向左按div1以显示删除和编辑按钮
});
});

我试图使它类似于iOS邮件应用程序，你可以滑动删除，但相反，你会点击，如果你再次点击，div1会将div2推出屏幕，因此基本上我想切换屏幕上的删除和编辑div

不确定这涉及到什么javascript和css。提前感谢您的回答。

这是给您的建议

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

---

您可以像这样构造div中的可操作元素，然后根据状态进行转换

<div id="div2">
    <div class="inner">
       Fusce fermentum
    </div>
    <div class="actions">
        <button id="delete"></button>
        <button id="edit"></button>
    </div>
</div>

然后用jQuery切换类：

$(document).ready(function() {
    $('#div2').click(function() {
        $(this).toggleClass('reveal');
    });
});

#div2 {
    background: #eeeeee;
    padding: 20px 80px 20px 20px;
    overflow: hidden;
    position: relative;
}

.actions {
    background: red;
    position: absolute;
    height: 100%;
    right: -60px;
    top: 0;
    transition: right 0.2s ease-in-out;
    width: 60px;
}

.reveal .actions {
    right: 0;
}

$(document).ready(function() {
    $('#div2').click(function() {
        $(this).toggleClass('reveal');
    });
});