1. Web Theme User Guide
  2. Documents
  3. Accordions
Book: For Content Editors
Last Updated: 01/07/2022 - 14:26

Accordions

If one of your pages has a need for expanding/collapsing content, the Accordion column type can be used. An accordion always contains the category title, an expanded and a collapsed state, and the right amount of spacing for readability.

  • Accordions are meant to consolidate longer list items such as the Frequently Asked Questions (FAQs) section.
  • Once selected from the dropdown option you will see the Heading and Body fields.
  • The Heading content will be permanently displayed, but the Body field content will be hidden until the user clicks into the Heading link.

Example

As a largely self-supported organization, donations are critical in our ongoing outreach.  We are tasked with building strong, mutually beneficial relationships with our 220,000 alumni.  We do this through a strategic combination of events and communications. Additionally, we help to build a culture of family with our current students and provide opportunities for them to connect with our alumni. 

There are numerous ways for you to connect with not only our alumni, but parents, students, staff, faculty, and community members as well.  Our alumni base is 220,000+ strong and continues to grow every year.  Our goal is to listen to your marketing objectives and work collaboratively with you to reach your target market on and off campus.  When you work with UC Santa Barbara Alumni, your brand will have an opportunity to be associated with one of the top public research universities in the United States.  Let’s connect today and help each other succeed!

Best Practices

  • To avoid wrapping, always keep the heading text short.
  • Place accordions in one area of your page to avoid confusion. 
  • Accordions don't always need to take up the entire width of the browser. Tailor the width values to your specific site needs.
  • Avoid stuffing big images, videos, or tons of text into an accordion.  Consider the visitors on your site who are using a phone or tablet and what that experience will be like for them.