Using Expandable Dividers

When to Use

Expandable divs have many uses, and there are a variety of examples throughout BU’s sites. They are especially helpful when you:

1. Have a page topic pertaining to multiple audiences, but also have related information and tasks targeted exclusively to certain groups and not others, i.e.:

Documents to Submit

All students must submit the following:

  • Copy of your passport
  • Student information form

Additionally, certain classifications must submit specific forms.

2. Have multiple steps or points related to each task or piece of information on the page, i.e.:

Applying for a Student Visa

3. Have a checklist or set of related information that users only need to access if they’re interested in deeper knowledge or further action, i.e.:

Family and Dependents
Bringing family and dependents to the U.S. requires some advance planning and preparation… Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Length of Content

A good expandable balances hiding information that could otherwise make a page too lengthy, and itself becoming too long for a user to easily scroll back to the top to collapse it again. If you find you have too much information in an expandable div, consider creating a new subpage for the content.

You can simply display this text on the page and call attention to key words or use a header to make it stand out.

A good rule of thumb is: If it takes more than 2 scrolls to get back to the top of the expandable to close it, it’s probably too long. There are exceptions to this rule—for example, when only a small percentage of your users will access the information, but it’s not quite enough for a dedicated subpage. If it’s getting difficult to easily skim information and move around the page, consider alternate solutions.

Consider dividing this text into sub-sections on the page itself without expandable divs; subsections in expandables if the information is audience-specific, an aside, or for further reference; or giving it its own page or subpage.

One giveaway here is that the text can be easily broken down into subheadings and bullets.