Accordion Section

The Accordion Section is ideal for displaying any type of content in a collapsible format, where all the content is presented within a single accordion. You can use any widget within the Accordion Section, and it functions independently from the Accordion widget. This content is inside of an Accordion Section.

  • Title – Enter the title of the accordion, which will appear in the accordion bar as a heading

  • Title as Heading – Select whether the Title should use an <h1>, <h2>, or <h3> heading tag, or no heading at all; all options appear visually the same

  • Bar Color – Select a background color for the accordion bar

  • Open on Page Load? – If enabled, the accordion will automatically open when the page loads

  • Intro – Enter introductory content to be displayed at the inside top of the accordion

  • Column Layout – Select the number of columns for the section. Choose from various layouts, such as:

    • Bare/Full Width – Spans the entire width of the page without site wrapper container

    • 1 Column – Single full-width column

    • 2 Columns – Multiple options, like 25/75, 50/50, etc.

    • 3 Columns – Flexible combinations such as 33/34/33, 25/25/50 or 50/25/25

    • 4 Columns – Four equally spaced columns

  • Top & Bottom Padding – Control the spacing inside the section, both above and below the content, with options ranging from 0 (no padding) to 5 (maximum padding)

  • Top & Bottom Margin – Adjust the spacing above and below the section relative to other sections on the page, with options ranging from 0 (no margin) to 5 (maximum margin)

  • Column Gutter – Set the spacing between each column, with options ranging from 0 (no spacing) to 5 (maximum spacing)

  • Widget Spacing – Set the amount of spacing around each widget in the section, with options ranging from 0 (no spacing) to 5 (maximum spacing)

  • Background Color – Select a background color for the section to complement your design

  • Background Image – Optionally, select an existing or create a new background Image from the Content Hub for the section

  • Background Opacity – Adjust the transparency of the background image from 0% to 100%

  • Column Separators – If enabled, vertical lines are added between columns

  • Equal Height Columns – If enabled, Rich Text widgets used in each column are forced to equal heights

  • Anchor ID – Add a single word to use as an anchor point for direct linking to the section

  • Has Container? – If enabled, the section is constrained by the site wrapper container

  • Constraint Background to Container – If enabled, the background is constrained to the site wrapper container