UI:What Ix:How UX:Why :: Think Product Design

Just keep in mind how you can use and control height of different DOM elements. I consider: offsetTop, offsetLeft windowHeight scrollTop scrollHeight clientHeight offsetHeight Take a look at simple self-explanatory demo and more comprehensive event and height demo .

This is the illustration of sortable lists by drag and drop in combination with expandable/collapsible animated accordion. Animation, some event handling and some object access are based on Yahoo! UI Library . Accordion menu implementation idea was taken from here . Core drag and drop function is dom-drag.js . About it you can read here . It's been used as is. I also used some ideas from here . This page uses dom-drag.js as well. Here is my demo of the result I've got. It features: Grip for drag-and-drop. Save/retrieve state (expanded or collapsed) and order of bars in cookies. MS Internet Explorer and Mozilla Firefox similar behavior. Customizable: allowMultipleExpand, expandAllOnload. Pure javascript implementation. If I'm not get lazy I'll publish the documentation and API. Regards, Eugene