This is jQuery UI Draft Content grouping / Panel advanced demonstration.
Latest source at http://github.com/idlesign/ist-ui-panel/, also available at jQuery UI Labs: http://code.google.com/p/jquery-ui/source/browse/#svn/branches/labs/panel
Old simple demo (without IE layout issues) is here.

Feel free to examine html of this page.

Central panel #1

Panel's initial options:
  • collapsible = false
Notes:
  • 'collapsible' option set to 'false' allows us to create static non-collapsible panel.

Central panel #2

Panel's initial options:
  • draggable = true
  • cookie = {'expires':7}
Notes:
  • If 'draggable' option is set to 'true' panel uses jQuery UI Draggable plugin and could be dragged by title. Draggable panel overlaps other non-draggable panels.
  • If 'cookie' option is not 'false' panel uses jQuery Cookie plugin to store panel state between sessions. 'cookie' option accepts the same parameters as Cookie plugin (in the example we store cookie for 7 days).
Only one of these accordion-like panels below is opened at a time.
Note: 'accordion' option is set to work with 'my_group' classed controls.

Central panel #3 (accordion-like #1)

Just me and you, pal. Just me and you.

Panel's initial options:
  • accordion = 'my_group'

Central panel #3 (accordion-like #2)

Just me and you, pal. Just me and you.

Panel's initial options:
  • accordion = 'my_group'

Central panel #3 (accordion-like #3)

Just me and you, pal. Just me and you.

Panel's initial options:
  • accordion = 'my_group'

Central panel #4

Panel's initial options:
  • controls = $('#cntrl').html()
  • collapseSpeed = 1000
  • fold = function() { alert(' "fold" callback executed '); }
  • unfold = function() { alert(' "unfold" callback executed '); }
Notes:
  • 'controls' option allows to place custom content at the right corner of unfolded panel's titlebar (in this example we place there 'Edit' link from hidden div with id=cntrl, examine page source).
  • 'collapseSpeed' option helps to ajust the duration of folding/unfolding animation (here animation time set to 1000ms).
  • Functions assigned to 'fold' & 'unfold' actions are called callbacks and are executed when the appropiate action took place.
And more:
  • You can disable this panel using .panel('disable').
  • You can replace this content using .panel('content', 'New content ;)').
  • You can destroy this panel using .panel('destroy'). Initial panel content would be restored.
Hosted by uCoz