Accordion

The Accordion widget is one of our top utility widgets for organizing text content. This widget also adds FAQ Schema to your site, which has great SEO benefits in Google searches.


The collapsing panels allow for large amounts of information to be displayed in a compact space, while staying neatly organized. Use it for FAQ's, policies and more. Content panels now support:

  • Images / Videos
  • Buttons
  • Bullet lists / Numbered lists

For a alternate accordion-style widget that includes support for multiple columns and additional styling, check out our FAQ/Accordion widget.


Preview: https://demo.wocode.com/accordion

SETUP

WIDGET PLACEMENT

  • Drop the widget onto your site and place it in a row or column where you would like the accordion to be seen.

WIDGET OPTIONS

  • Open the widget option panel.

  • Items: These contain all of the content for the title and content areas for each panel:

    • Textual Content: The title and description for the accordion item

    • Button: Enable and link a button to the accordion item

    • Media: Add an image or video to the accordion item

  • Show one expanded item at a time: When enabled, only one accordion item will be allowed to be open at a time. When disabled, multiple accordion items can be opened or closed at the same time.
  • Show first item expanded: When enabled, the first accordion item will be opened by default. When disabled, all items will be closed by default.
  • Enable FAQ Schema: This can enhance the visibility of your FAQs as rich snippets in Google search results, potentially driving increased traffic to your website.

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the Accordion. Most of these options are related to padding and text styling and are self explanatory, however there are a number of design options worth mentioning specifically.


  • Title: In this section, you can apply styles to the title text. Notably, there are a few options that we wanted to highlight specifically:

    • Type: This setting sets the HTML heading tag for the title text. When the type is changed, the site theme’s heading style for that HTML heading is automatically applied. Additionally, you can manually adjust the title text styling using the Text Styling options located below the Type setting.

    • Reset to Site Theme Style: This resets the accordions title styling back to the sites default theme styling.


  • Expansion Icon: Here, you’ll find options to style the accordion’s expansion icon (arrow). There are multiple styling options available:

    • Color: Sets the color of the arrow icon.

    • Icon Size: Sets the size of the arrow icon.

    • Background Color: Sets the background color for the expansion icon.

    • Padding: Sets the padding around the arrow icon.

    • Corner Radius: Sets a corner radius for the expansion icon:

    50% = A Full Circle

    0% = A Square


  • Media: These settings affect the images within the accordion:

• Width: Sets the size of the image based on width. The image will retain the aspect ratio of the original. For example, a square image will remain a square and a rectangle image will remain a rectangle.

• Corner Radius: This applies a radius to the edges of the image.