The accordion block provides a vertically stacked list of headers (panel titles) and corresponding sections (panels). On the front end the panels will be hidden by default. Users can select each panel title to reveal or hide the associated content.

Site visitors without JavaScript or using legacy browsers will see a standard list of headings and content.

Make sure the accordion is appropriate for your content before using one. Refer to the Accordion Guide for usage instructions.

How to Use

You must be using the block editor to use an accordion.

  1. Select the block inserter and choose Accordion from the list (under the Layout Elements category).
  2. The accordion block will automatically create six panels. You can add or remove panels as needed, but if you have fewer than six make sure you carefully consider whether you really need an accordion.
  3. Fill in your content by either inserting blocks or copying existing blocks into the accordion (you can also drag them onto the “Add block” button).
    1. You can use any block inside of a panel, but don’t try putting an accordion inside of another accordion. That is not allowed for usability reasons and will break the accordion.
  4. Required: Select the accordion block and make sure you have the correct heading level selected. (For example, if your accordion is under a heading level 2, then you should select heading level 3.)

Additional Options

You can change the order of the panels using the handles on each panel much the way you would with any other block.

You can also remove individual panels without effecting the other panels.

The accordion can be set to align wide, full, right, left, and center much like other components. Be careful about choosing wide or full width if you have a lot of text, as wide aligned text breaks the accessibility of the content.

Example

This sample accordion block uses the default settings with heading level 3 panel titles, because this accordion is under the “Example” second-level heading.

WSU Pullman

  • Discoveries that improve lives
  • One of America’s top research universities
  • Professors among the best in their fields

WSU Spokane

Located in the heart of Spokane’s University District, the WSU campus is bordered on one side by the Spokane River and Centennial Trail, giving students direct access from campus to recreational activities. The campus is bordered on another edge by downtown Spokane, which has numerous dining and entertainment venues within walking distance from campus.

WSU Tri-Cities

Quick Facts

  • Students: 1,813
  • 20 bachelor’s degrees
  • 33 graduate degrees
  • Focus: Hands-on, project-based learning
  • 19+ student organized clubs
  • Established: 1989
  • Campus size: 200 acres
  • Tobacco-free campus

WSU Vancouver

Feel at home

  • Many students choose WSU Vancouver because they feel at home in a small-school atmosphere, yet want the resources of a public research university.

WSU Everett

Washington State University Everett is student- and community-centered, providing industry-aligned undergraduate programs with an interdisciplinary focus to the Puget Sound region to prepare students to compete globally from the local economy.

We bring WSU’s world-class academics and research to you in small class sizes and with hands-on, project-based opportunities. WSU currently offers seven high-demand bachelor’s degrees in Everett, Wash. Faculty from programs in Everett report directly to WSU leadership in Pullman to ensure the same quality of delivery for students.

WSU Global Campus

100% online. 100% WSU

Since 1992, WSU Global Campus has been bringing the best of WSU to students around the globe who demand a highly engaging and transformative education but prefer to learn and study on their own turf.

WSU Extension

WSU Statewide

With 39 locations throughout the state, WSU Extension is the front door to the University. Extension builds the capacity of individuals, organizations, businesses and communities, empowering them to find solutions for local issues and to improve their quality of life. Extension collaborates with communities to create a culture of life-long learning and is recognized for its accessible, learner-centered, relevant, high-quality, unbiased educational programs.

Source

This is an HRS-created block provided as part of the HRSWP Blocks plugin.