What's the preferred vertical orientation for a toggle script?

Question

What's the expected behavior of a disclosure widget on a website?
What's the conventional direction of the expanded state?

1. Upward
   the content pushes down the clicked button while it gradually appears
2. Downward
   the content slides down beside the button

In which cases would you recommend option 1?
If option 1 is appropriate, which part (top or bottom) of the content should appear first in an animation?
Should the page auto-scrolls when the content is not visible in the viewport?

Answer 1

What's the expected behavior of a disclosure widget on a website? What's the conventional direction of the expanded state?

By convention the disclosure direction (the direction the text appears) for a toggle widget is downwards and below the button. The button stays stationary. This is inherited from the behavior of tree controls where each node in the tree can be considered as a toggle widget.

Accordions, at least jQuery Accordions, don't strictly behave as toggles. Clicking a section button to open it does an upward reveal. Both button and text move. Clicking the section button again does not close it. Instead closing is achieved by opening a different section.

So, by convention, and also what is expected, is that a disclosure toggle will reveal downwards - with the button staying stationary.

Which part (top or bottom) of the content should appear first in an animation?

With either an upward or downward reveal the reveal can be a slide (the revealed text moves) or a wipe (the text stays stationary, but more/less is shown) or instant or a fade-in/fade-out. It's a matter of style and fashion. In general UI my impression is that slow animations are going out of fashion, and that instant switching (or fast fades) are becoming most popular. The reason is that animations beyond 300ms duration make sites feel sluggish. A fast fade-in or fade-out is a little less jarring than the other options.

If you have a tree on your website both the kind of reveal (slide, wipe, instant, fade) for any toggle, the easing function, and the speed you use for the reveal should match that used by the tree. (consistency). The tree is multiple toggles. If the tree uses a wipe, use a wipe. This will determine what part of the text is shown first. If you don't have a tree but do have menus that appear on a hover, use their method of reveal as your guide.

And if you have a free choice? Easiest on the eye, and therefore the behavior I'd advocate, is to make way for the new content and at the same time fade it in. I wouldn't slide at all. Moving text is hard to read, and you read from the top, so only a downward wipe would potentially steal a march on being able to read the text sooner.

In which cases would you recommend option 1? (upward reveal)

The windows taskbar is a form of toggle reveal, triggered by hover, that reveals upwards. On a website a dashboard style web page that fits on one page could use a taskbar and an upward reveal, that reveals over rather than shifting other content up. It's a pretty exceptional use.

Also an exceptional case - I've designed diagrams where clicking certain labeled icons does local reveals of annotations in a direction away from the diagram center. Moving the clicked object is not good for a toggle, since you'd like to be able click it twice to close the annotation again.

Revealing in any direction can be good for a reveal over a fixed size area. Moving the button is not good for a toggle.

Should the page auto-scroll when the content is not visible in the viewport?

Yes. This is what happens in good tree controls. Consider each node as a show/hide toggle. The value of seeing the content that you expect to see outweighs the disadvantage of not being able to click twice in the same spot to undo.

Answer 2

In case someone else is confused by what he meant by a "disclosure widget," here's the Wikipedia blurb:

A disclosure widget or expander is a graphical user interface element (widget) that is used to show or hide a collection of "child" widgets in a specific area of the interface.

That being said...

I would expect the new content to push down any buttons under it (such as the Save/Cancel buttons on the image in Wikipedia) because the user wishes to take into account the additional options/information before taking an action.

I'm not sure what you mean by "auto-scroll"; the page will automatically grow once the additional content is displayed.