变长div

   在前端页面布局中，我们经常需要隐藏/显示div，一种常用的方式是使用position: fixed属性，但是这种属性是针对整个页面定位，对流动数据的展示比较有效，还有一种是使用position: relative属性，实现可伸缩div。                          刚开始时，页面布局为

点击向右箭头后，页面布局为：

实现方式(向右箭头的class=list, 实际是使用bootstrap中图标库中的图标)：
html文件：

<div class="data">
   <div class="list-zhankai">
   </div>
   <span class="glyphicon glyphicon-list list"></span>
   <div class="data-show">
   </div>
</div>

css文件：

.data{
    width: 1010px;
    height: 640px;
    overflow: hidden;
    position: absolute;
｝
 .list-zhankai{
    width: 100px;
    float: left;    
} 
.list{
    margin-top: 10px;
    margin-left: 20px;
    width: 10px;
    height: 10px;
    float: left;
    position: relative;
}   
.data-show{
    height: 640px;
    position: relative;
    left: 10px;
    background-color: #2a6496;
    right: 0px;
    overflow: hidden;
}

JavaScript文件(使用jquery)：

$(".list").on("click", function(){
    $(".list-zhankai").toggle(600);
})