Skip to content
Piedmont Plastics - Plastic Sheet, Rod, Tube, Film

Accordion (Content)

Building pages with user engagement in mind is a good practice. One of the various ways to increase user engagement is through the use of an interactive accordion element. A basic accordion allows for hiding and showing content when a user clicks on an item. The next level of accordion is a block that dynamically changes graphics on a page when a user selects an item from the accordion list. The Accordion Content block does exactly this.

The Accordion Content block comes with various ways to layout the block on the page + display content. Let's dive in.

First things first, an accordion isn't an accordion those pieces of content can be added by selecting the plus icon on the bottom left corner of the Items section. Selecting this button allows adds Accordion Item to the block. Repeating this step allows us to add more items.

When using the Accordion Item set be sure to enter the following fields:

  • Title

  • Description

  • Image is required for this to work correctly

  • Optionally link an entry by flipping the Link an Entry toggle.

Rule of Thumb

When creating these accordion items it's best to use between 3-5 items. More than 5 items might look too cluttered. Keep in mind that the length of the text inside the accordion needs to be taken into consideration as well for optimal viewing.

Once the items and content are added it's good to make sure our block looks good on the page. A few additional options we can dial in are:

  • Selecting an size from the options given gives flexibility over the image orientation in relation to the length of the accordion items on the left. For more items a portrait selection may be ideal, for fewer items a landscape selection might work best.

  • We have the option to select which side of the accordion items the image should be displayed (left/right).

  • Flexibility is given to select a color that aligns best with the selected graphics and other content on the page.

This doc highlights the significance of user engagement in webpage design and introduces the Accordion Content block as an interactive tool to enhance it. This dynamic element not only hides and shows content but also dynamically changes graphics, providing a versatile layout for displaying information. Users can customize the block by adding items with titles, descriptions, and images, and further adjust settings such as size, image orientation, and color to optimize visual presentation on the page. Spice up those pages!