An Accordion section displays a list of headers that visitors can click to expand or collapse additional information. The information within each accordion item is text-based, and the items can be rearranged in the Site Editor.

For more information about adding and using an Accordion section, see Accordion Section.

Accordion terminology

Each part of an accordion item has a specific name:

Label — The header that is visible when the accordion is collapsed. Visitors click the label to expand the item.
Content — The information that appears when the label is expanded.

Customize an Accordion with CSS

You can customize the appearance of an Accordion section using custom CSS.

This article provides CSS code examples that you can copy into your Site CSS Editor or Theme CSS Editor. When a CSS Class is required, add the class specified in the corresponding Accordion section for the styles to take effect.

Each code example includes comments explaining which values or properties you can change. Comments may also indicate when a property is optional and can be removed.

You can use the CSS Class names provided in the examples or replace them with your own class names if preferred.

Before you begin

If you're not familiar with adding custom CSS, see Writing Custom CSS for instructions on adding CSS to your site.

If you need help adding a CSS Class to an Accordion section, see CSS Classes and How to Use Them.

Set an image as an accordion background

CSS Class: accordion-image-background

.accordion-image-background {
background-image: url(); /*insert image URL inside the parenthesis*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

Set a color as an accordion background

CSS Class: accordion-bg

.accordion-bg {
background-color: #000;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

Change the label background color

CSS Class: accordion-labelbg

.accordion-labelbg .accordion-wrapper .section-accordion .accordion-item .label {
cursor: pointer;
display: flex;
background-color: #2196F3; /*you can change hex color code*/
}

Change the content background color

CSS Class: accordion-contentbg

.accordion-contentbg .accordion-wrapper .section-accordion .accordion-item .content { 
display: flex; 
background-color: #b5ddfd; /*you can change hex color code*/
border-top: 1px solid #EEE; /*you can change border size, borderline type, and hex color code*/
padding-left: 20px;
}

Change the drop icon background color

CSS Class: accordion-iconbg

.accordion-iconbg .accordion-wrapper .section-accordion .accordion-item .label .accordion-toggle i {
color: #fff; /*you can change hex color code*/
}

Customizing accordion fonts

CSS Class: None needed

You will need a different CSS Code if you want a different color for each font size

.accordion-text p {
color: #458ED6; /*you can change hex color code*/
font-size: 1em; /*you can change the font size*/
opacity: 0.5; /*optional*/
}

.accordion-text h1 {
color: #000; /*you can change hex color code*/
font-size: 1em; /*you can change the font size*/
opacity: 0.5; /*optional*/
}

.accordion-text h2 {
color: #FFF; /*you can change hex color code*/
font-size: 1em; /*you can change the font size*/
opacity: 0.5; /*optional*/
}

.accordion-text h3 {
color: #1ab057; /*you can change hex color code*/
font-size: 1em; /*you can change the font size*/
opacity: 0.5; /*optional*/
}

.accordion-text h4 {
color: #ffd55a; /*you can change hex color code*/
font-size: 1em; /*you can change the font size*/
opacity: 0.5; /*optional*/
}

Here's the CSS Code if you want the same font color for all font sizes.

.accordion-text p, h1, h2, h3, h4, h5, h6 {
color: #458ED6; /*you can change hex color code*/
opacity: 0.5; /*optional*/
}

Need Help?

Contact Zoomforth Customer Support through the in-app chat or email support@zoomforth.com.

Customize your accordion section