Draggable and hide

Question

For a project I need a box, which often can find in Desktop application Editors. The box has three areas. One Content area, a tilebar and a sidebar. If a person drag the tilebar, the sidebar grow up. The sidebar need a minimal widht. By a cklick on the tilebar the sidebar dissapear. The contentarea use allways 100% of the available width...

I saw that in an other direction in the chatbar here http://drop.io/hgjw8fb I draw that here:

Can anyone tell me how to make this with minimal markup or where I can find a plugin in Jquery for this? I use jquery and jqueryUI

Answer 1

jQuery Splitter Plugin - Although you'll have to add the click to collapse/expand functionality yourself.

Answer 2

I have used and love the jQuery layout plugin found here: Main page jQuery Layout plugin

Here is a very simple demo from that site also Demo - minimalist