Question

I am design a site with the following side bar

(div width=300px) sidebar
> (div) Create New Client
  > (button) New Client
> (div) Search
  > (input text) search_text
  > (button) submit
  > Client 01
  > Client 02
  > Client 03
  > ...
> (div) History
  > Action 01
  > Action 02
  > Action 03
  > ...

All the div tags are linked to the accordion function in jQueryUI (apart from the sidebar one. obviously) so they expand and contract to reveal content.

My problem is this. The client div will show about 50 clients, the history div will show about 20 actions. How can I make sure that the accordion uses the full height of the page (with a scrollbar if necessary) and doesn’t push the content down off the bottom page?

Answer 1

Have decided to use the following layout and then have the area below the accordion (div) reload as the user types, using ajax:

(div width=300px) sidebar
> (div) Create New Client
  > (button) New Client
> (div) Search
  > (input text) search_text
  > (button) submit
> (div) History
  > (radio buttons/textfields) History Options

(div) Results
  > Client 01/Action 01
  > Client 02/Action 02
  > Client 03/Action 03
  > ...

This all makes my question about expanding a jquery accordion rather mute since the div results height needed can be deduced by subtracting the height of the accordion from the height of the document/window