Accordion

Overview #

The Accordion section is designed to present information in a stacked, expandable format, making it ideal for FAQs or additional details. This section allows users to add multiple Row blocks to create new accordion rows, enhancing the flexibility and organization of content.

Key components and functionality #

Content position

This setting determines the alignment of the content within the Accordion section. Users can choose from three options: left, right, or full width. The default setting is right.

Sticky header

Enabling this option keeps the header fixed at the top of the page as users scroll, ensuring that the Accordion's title remains visible. This setting is enabled by default.

Dynamic content

Dynamic content allows for the automatic inclusion of blog posts or other content types within the Accordion. This feature ensures that the accordion remains up-to-date with the latest information.

Blog and tag

• Blog: Select a blog to pull content from.
• Tag: Specify a tag to filter content from the selected blog.

Number of items

This setting controls the number of items displayed in the Accordion. Users can select a value between 0 and 50, with the default set to 0.

Show excerpt

This option allows users to display an excerpt of the content instead of the full text, providing a concise overview. By default, this setting is disabled.

Sort by and sort order

• Sort by: Choose to sort items by title or date published.
• Sort order: Select the order of sorting, either ascending or descending.

Supported block types #

The Accordion section supports the Row block type, which can be used to add individual rows within the accordion. Each row can contain various content types, such as text, images, or links.

Usage notes #

• Responsive design: Ensure that the Accordion is tested on various devices to maintain usability and readability.
• Performance: Limit the number of items in the accordion to avoid performance issues, especially on mobile devices.
• Accessibility: Use clear and descriptive headings for each accordion row to enhance accessibility for screen readers.

Usage examples #

1. FAQs Section: Use the Accordion section to create a comprehensive FAQ page. Add multiple Row blocks, each containing a question and its answer, to provide users with easy access to information.

2. Product Details: For a product page, use the Accordion section to organize detailed product specifications, warranty information, and customer reviews. This setup keeps the page clean and easy to navigate.