Accordion Block

What is a content block? Content blocks are pre-designed components that allow you to display and customize content on your website. The YaleSites platform offers a variety of blocks to meet different content needs.

View All Blocks

Accordion is an interactive Block that allows users to choose which sections of content to expand and explore further. Accordion Blocks work best when your content falls into natural groupings that only some users will need to access.

Tabs vs. Accordions

Both Tabs and Accordions help organize and consolidate content but have different use cases.

  • Use the Accordion Block when users need to view more than one item at a time
  • Use the Tab Block for related, self-contained categories of content that are neither sequential nor interdependent
  • When in doubt, use the Text Block and organize your content with clear, descriptive headings

Accordion Options

Adjust the weight of each section to determine the hierarchy. You can show or hide the row weights using the option in the top right corner of the editing area. By default, the sections will appear in order that they were created.

Tips and Tricks

Despite their usefulness for organizing content, there may be better choices for your website than accordions, as they hide content and rely upon user interaction. For this reason, you should present any critical information outside of accordions.

Give clear indication of what the content of each section will cover. We want to make sure that users are able to easily identify where they can find their relevant information. This will also help them to avoid unnecessary content and get right to what they are looking for. Vague headings can cause the user to open more sections than necessary. An inadequate description can lead a user to miss the content they were looking for.

Break down any large amount of information into smaller, more digestible sections. Hiding large amounts of content behind one section can cause user to sift through more information than necessary to find what they need. Additionally, having an accordion be too large To improve the user experience, separate your content in a way that doesn’t overwhelm the user.

Building With Blocks

This resource will help you understand the Blocks available and how to use them to make your content shine.

View This Resource