Javascript 用高度展开折叠div

我有两个水平浮动的div:left；宽度：50%；。但我想给他们高度：500px和溢出：隐藏，并在底部显示展开/冷却按钮。如何使用jquery创建它

   <div id="tab-two">

        <ul class="nav">
            <li class="nav-one"><a href="#featured" class="current">last</a></li>
            <li class="nav-two"><a href="#core">popular</a></li>
        </ul>

        <div class="list-wrap">

            <ul id="tabclick">

                <li>
            ***content***                       
                            </li>
             </ul>

         </div> 

     </div>
 <style>
 #tab-two {
 background: none repeat scroll 0% 0% #FFFFFF;
 border-radius: 4px 4px 4px 4px;
 border-right: 1px solid #CCCCCC;
 margin: 0pt 1% 5px 0pt;
 padding: 1px 0pt 0pt 5px;
 }
 </style>

---

我看不出在代码中有2个div可以按所描述的那样工作。这是我为你设计的。您应该能够编辑它以适合您的HTML/CSS标记：

<style type="text/css">

.floatBox {
    position: relative;
    float: left;
    width: 50%;
    height: 500px;
    overflow: hidden;
    display: block;
}

.boxContent {
    display: table;
}

a.expandLink {
    width: 100%;
    height: 30px;
    background: #059;
    color: #fff;
    position: absolute;
    bottom: 0;
    text-align: center;
    display: block;
}

</style>


<script>

var collapseH = 500; // set the height of your collapse state

$(document).ready(function() {
    $('.expandLink').click(function() {
        var $link   = $(this);
        var $box    = $link.parents('.floatBox'); // get parent with class="floatBox"
        var innerH  = $box.children('.boxContent').innerHeight(); // get height of inner HTML
        var linkH   = $link.height(); // get height of link to add to your animation

        if ($box.height() == collapseH) { // if the box is collapsed

            // animate to full inner height
            $box.stop().animate({
                height: innerH+linkH
            }, 500);

            // change text of link
            $link.html('collapse');

        } else { // if it is expanded

            // animate to collapsed height
            $box.stop().animate({
                height: collapseH
            }, 500);

            // change text of link
            $link.html('expand');

        }

        return false;
    });
});

</script>


<div id="container" style="width: 800px;">
    <div class="floatBox">
        <div class="boxContent">
            <!-- PUT YOUR CONTENT HERE -->
        </div>
        <a href="#" class="expandLink">expand</a>
    </div>
    <div class="floatBox">
        <div class="boxContent">
            <!-- PUT YOUR CONTENT HERE -->
        </div>
        <a href="#" class="expandLink">expand</a>
    </div>
</div>

---

你也应该表现出一些努力——你试过吗？你被卡住了吗？或者你希望有人为你建造它；如何使用jquery创建它？知道怎么问吗