Add Expandable/Collapsible Content With an Accordion Module

The accordion module is used to display content in different panels which can be toggled open and closed with an accordion effect. The module allows you the capability to drop any other module type (ex. text or image) inside the accordion panels. This feature offers you more flexibility in designing content for accordions. With the ability to drop any module, apply styling, and select grids, you can design any layout for accordions.

To use the accordion module:

  • Drag and drop a new accordion module into the Themify row.
  • Enter a title for the accordion tab under the "Accordion Title"
  • Enter the text to show within the accordion tab. If editing via backend, click on the orange "Edit Content" button. This will open a panel where you can edit the modules and subrows exactly like in the usual backend mode. (watch video)
    accordion edit backend.png
    If you are editing in the frontend by Turning on Builder, first set up each tab's title and click the orange "Done" button in the top right corner.
    Screenshot 2024-07-24 at 10-46-54 Religious School - Sinai Free Synagogue.png
    Then click on the tab title (which opens the tab), click inside the content box (says Accordion content) and start typing. This adds content to a text module, but you can drag and drop other modules into place. (watch video)

  • To delete or duplicate a row: hover over the row menu icon (top left icon of the row)
  • To add a row: just click the "Add new row" button

Other module settings:

  • Module Title This option is used to add the title of your module.
  • Accordion Title The title shown in the accordion heading for each accordion tab.
  • Accordion Text The text shown in the accordion content area for each accordion tab.
  • Default Open/Closed This option determines whether a tab defaults to open or closed.
  • Add New Row This option adds a new row to add more accordion tabs.
  • Accordion Layout This option is used to determine the layout and style of the accordion module and will affect how the tabs are shown.
    • Option 1 This layout will show the tab headings and content as one block.
    • Option 2 This layout will show the tab headings separate from the content in two blocks.
  • Expand / Collapse This option is used to change what will happen when a user clicks on an accordion heading.
    • Toggle When clicking on a tab heading, the selected tab will open and other tabs will still remain open.
    • Accordion When clicking on a tab heading, the selected tab will open and other tabs will be closed.
  • Accordion Color This option is used to change the color of the accordion module.
  • Accordion Appearance These options provide the ability to toggle various effects for the accordion boxes.
    • Rounded Toggles whether the corners of the module's content will be rounded.
    • Gradient Toggles whether the module will have a gradient effect applied to it.
    • Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
    • Embossed Toggles whether the module will have an emboss effect applied to the edges.
    • Shadow Toggles whether the module will have a shadow effect applied to it.
  • Icon Add an icon that'll appear when your accordion is opened or closed.
  • Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

 

Сategory Menu
Powered by Zendesk