An accordion section is a list of headers you can click to expand or collapse details. The details of the headers are all in text format, and they can be rearranged / re-ordered in the site editor. More information on how to add and use an accordion can be found here.
The accordion part that is usually visible in an accordion is called label. The accordion part that appears after the label has been clicked is called content. Customizing an accordion is done using custom CSS.
In this article, we have compiled the CSS Codes to customize your accordion that you can copy to your Site or Theme CSS Editor, and add the CSS Class (if there's one) indicated in your accordion section for it to take effect. Each code has a comment if the value or property can be changed, or if it can be removed as it's optional. You can also change the CSS Class name if you prefer.
You can follow the guide here if you are not familiar with pasting the CSS code, and the article here to add a CSS Class to a section.
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*/
}