Web Guide: Toggled Accordion

Use the accordion list element to create smaller information units — FAQs, instructions, bios, etc.

The accordion list element prevents the page from becoming too long. Each toggle item is a separate page element so it’s easy to move around, reorder, add more or delete.

Using default style:

Toggle title with open default state

You can select open or close default state. Here, it is open, and you can read this text which normally would only be visible with a click.

Toggle title default

Toggle content goes here, click edit button to change this text.

Adding grey background color, 20px padding on left and right.

I have a grey background

Toggle content goes here, click edit button to change this text.

Adding grey color border with 3px radius, 20px padding on left and right.

i have a border

Toggle content goes here, click edit button to change this text.

LIVE SITE EXAMPLES:

  1. used as a supplemental element for additional info: a committee member list with “More” for additional bio information.  http://lipmanfamilyprize.wharton.upenn.edu/us/steering-committee/
  2. standard FAQ use: http://mba.wharton.upenn.edu/admissions/admissions-faqs/
  3. used for list purposes — MBA program admissions checklist. https://mba.wharton.upenn.edu/mba-application-requirements/