jquery - jquery toggle panel and auto adjust divs

Question

I have a requirement which uses jquery toggle and resize functionality. I need to display 3 divs in a page. The first div is a side pannel toggle div.

When I toggle side panel div, the other two divs should automatically adjust within the available space. i.e, when the first div is collapsed the second and third div should occupy full page and when first div is expanded the other second and third div should resize and fit in the space available.

Can anyone please help me to achieve this functionality.

Answer 1

试试 CSS。这很容易。

<style scoped>
#mainDiv{ width:100%; height:100%; }
#div1, #div2, #div3 { width:30%; height:30%; }

#div1{ background:black; }
#div2{ background:blue; }
#div3{ background:green; }

#div1:hover,#div2:hover,#div3:hover{ width:100%; height:100px;display:block; }
</style>


<div id="mainDiv">
    <div id="div1">&nbsp;</div>
    <div id="div2">&nbsp;</div>
    <div id="div3">&nbsp;</div>
</div>

添加转换将解决您的问题。你几乎可以把它当作 ipad 中的 iTunes currosel