What's the preferred orientation for a toggle script?

Question

Im gonna use some kind of accordion javascript (you click a button and some content appears), Id like to know from an UI/ergonomic standpoint what's the best orientation of the expanded state?

1. the button moves down as the content becomes visible (UP)
2. the content beside the button (DOWN)

side questions:

• Will the page auto-scroll?
• What's the best lightweight script for that kind of thing?
  (not library/framework dependent and for several buttons)

Answer 1

My preferences:

• Button does not move. (I just clicked it; I shouldn't have to go looking for it and move the mouse to click it again.)
• Grow left/right rather than up/down. (Most displays these days are a lot wider than they are tall, and most browsers put a bunch of stuff at the top of the window, so growing horizontally means the user is less likely to need to scroll to view the new content.)

Answer 2

I would say that you wouldn't want to item you just clicked to slide down, that might frustrate the user a bit.

If by auto-scroll you mean the scrollbar shows up if the page grows in height beyond the visible bounds, then yes. If by auto-scroll you mean shifts the focus of the page, then no, unless you make it do so.

Accordians are REALLY easy to write (even easier with jQuery) so I wouldn't even use a third party component other than jQuery and write your own.

Here's an example of building an accordian that has images.

Answer 3

Standard accordions move the button. This is why I don't like accordions. But here's the expected result of clicking on an accordion button:

1. If you click above the open content area, the button (and any buttons below it) moves down unless it is the top button in the stack, in which case nothing happens.
2. If you a button below the open content area that button (and any buttons above it) move up, revealing a content area below the clicked button) unless the button is the last one in which case nothing happens.