Accordion Widget

The Accordion Widget makes it easy to organize content in collapsible sections. Customize fonts, colors, and layout with full control over styling and behavior. Great for FAQs, product features, and more.

About the Accordion Widget

The new Accordion Widget for EverWeb by EverWeb Garden adds a sleek, modern way to organize and display content on your site without overwhelming your visitors. Instead of showing everything at once, an accordion lets you hide and reveal content in collapsible sections, perfect for keeping pages clean, fast, and easy to scan.

When should you use an Accordion?

If your webpage includes a lot of related information, but you don’t want it to take up the entire screen, the Accordion widget is your best friend. It keeps things tidy and puts the user in control—they can open only the sections they care about.

Here are a few smart use cases:

FAQs (Frequently Asked Questions): Perfect for answering customer questions without filling the page with long text blocks.

Course or Lesson Outlines: Show the topics or modules and let users click to expand for more details.

Product Feature Lists: Highlight key features without making the page feel cluttered.

Team Member Bios: Show names or titles first, then let visitors expand to learn more about the person.

Terms and Policies: Hide legal or technical text until someone wants to read it.

Some uses cases

FAQs (Frequently Asked Questions): Perfect for answering customer questions without filling the page with long text blocks.
Course or Lesson Outlines: Show the topics or modules and let users click to expand for more details.
Product Feature Lists: Highlight key features without making the page feel cluttered.
Team Member Bios: Show names or titles first, then let visitors expand to learn more about the person.
Terms and Policies: Hide legal or technical text until someone wants to read it.

Images & Styled Text Are Support Per Section

You can include styled text in each section and an image with customized placement.

Select an image and customize how it appears in the section. It can appear above or below your styled text content and you can even specify customizable width and height dimensions.

/01

Accordion Widget for EverWeb

This section is where you define the actual content that goes inside each accordion item:

Enter Headers: Add titles for each accordion section. These are what users will click on to expand the content. You can add as many as you’d like using the Add button.

Enter Paragraph Text: Add styled text for each section using the rich text editor. You can bold, italicize, underline, link, align, and more. Perfect for formatting FAQ answers, course content, or bios.

Insert Images: You can insert an image per section using the Select Image dropdown.

Choose its position — either top (above the text) or bottom (below the text).

Turn on Custom Image Size if you want to specify the image’s exact width and height using pixels or percentages.

Add ALT Text for accessibility and SEO.

This flexibility allows you to make each section feel unique — great for pairing a product image with a feature description or a team photo with a bio.

Styling and Behavior Settings

The bottom section of the Accordion Widget Inspector lets you control its style and behavior. You can set different fonts and background colors for open, closed, and hovered headers, as well as for the content area.

You also get options to show icons next to headers, choose whether sections can all be collapsed or if one stays open, and enable equal height for all sections. These settings help you create a clean, interactive design that fits perfectly with your site.

/02