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?

  • Could this be rephrased to make it clearer? The words "toggle script" only appear in the title, not the content and judging by the other comments the language is ambiguous. Examples of the options would also be appreciated.
    – Steve
    Jun 1, 2011 at 11:38
  • 1
    @steve Option 1. is often associated with accordions. Here's a demo of a variant of option 2.
    – Knu
    Jun 1, 2011 at 12:26

2 Answers 2


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 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.

  • This is really interesting you prioritizes the ability to close immediately over the content availability. For example someone clicking a button which is just above the bottom of the viewport would see nothing. I have never considered the fade reveal as an option (no push effect). Your wipe advocacy is sound.
    – Knu
    Jun 7, 2011 at 15:43
  • @Knu - Excellent point. I've updated (um corrected) my answer. Jun 7, 2011 at 15:50

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.

  • When the content is not visible in the viewport it won't scroll automatically. You should check the details and summary HTML5 elements. Where are those "Save/Cancel buttons" buttons you are talking about?
    – Knu
    Jun 1, 2011 at 1:16
  • I was referring to the following image: en.wikipedia.org/wiki/File:Expander.png. I didn't realize that you were using HTML5 at the time I wrote my answer.
    – Zian Choy
    Jun 1, 2011 at 5:31
  • I said "on a website": application implementations are fundamentally different.
    – Knu
    Jun 1, 2011 at 6:12
  • 1
    @Knu why are applications fundamentally different?
    – Rahul
    Jun 7, 2011 at 12:34
  • @rahul because flexibility is inherent to the web medium (in applications fixed design is the rule and the notion of flow is often absent)
    – Knu
    Jun 7, 2011 at 12:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.