问最好的方式来动画手风琴类型的酒吧？

EN

<script language="javascript"> 
    function toggle() {
        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");
        if(ele.style.display == "block") {
                ele.style.display = "none";
            text.innerHTML = "BUTTON";
        }
        else {
            ele.style.display = "block";
            text.innerHTML = "BUTTON";
        }
    } 
    </script>

<!-- BUTTON PLACED IN MY TOP BAR -->
<div class="topbar">
<div class="company-list top-border"><a id="displayText" href="javascript:toggle();">Click here to display customer list.</a></div>
</div>


<!-- TOP WIDGET (different from top-bar, placed above top-bar in my HTML structure) -->

<div class="top-widget">
<div class="company-list-toggle bottom-border" id="toggleText" style="display: none">

    <p>Sample text here...</p>

<div class="company-list top-border"><a id="displayText" href="javascript:toggle();">Click here to display customer list.</a></div>

</div>
</div>

.top-widget { /* tried CSS3 transitions here and did not work */
    position: absolute;
    z-index: 100;
    background: #2b332a;
}