Color Control for Accordions
May 26, 2026
Select Colors for Clickable Headers and Panes
New properties come to the Accordion Section Layout for more color control in your hands. An automatic twirling animation of the plus (open) and minus (close) icons has also been added plus a fade-in transition option as panes open and close.
Clickable Pane(s) Color
The horizontal bars that form the accordion can be any color from the brand palette or a custom color added using a hexadecimal code. All of the bars will automatically be the same color as more panes are added. However, two separate instances of the Accordion Section Layout can have different colors on the page.
Pane Background(s) Color
The background color of the content panes can be any color from the brand palette or a custom color added using a hexadecimal code. All of the pane backgrounds will automatically be the same color as more panes are added. Note that this color can be overridden by an added feature widget with it’s own background color specified.
Invert Text Color
Click this new checkbox to invert the text color on the clickable headers.
Fade Transition
Click this checkbox to automatically add a fade-in transition as the accordion pane opens and closes.
Learn More
Explore all the color and animation options in this powerful layout by visiting the Accordion Layout Section help page >