Accordion Blocks
GENERAL ELEMENT COMPONENTS & CSS SNIPPETS
Select a Squarespace Element to Examine CSS Selectors:
| Squarespace Element | Description |
|---|---|
| Accordion Block Elements | Refers to accordion blocks. |
CSS Code Snippets for Customizing Accordion Blocks
Create an FAQ section by adding borders and background colors to accordion items
/* Start: FAQ V1 - Launch Hub Studio */
@faqv1__AccordionBackgroundColor: #fefefe;
@faqv1__AccordionHeaderColor: darkorange;
@faqv1__AccordionDescriptionColor: black;
@faqv1__AccordionBorderColor: #ddd;
@faqv1__AccordionBorderRadius: 5px;
@faqv1__IconColor: inherit;
@faqv1__ActiveIconColor: cornflowerblue;
.accordion-item__title {
color: @faqv1__AccordionHeaderColor !important;
}
.accordion-item__description {
color: @faqv1__AccordionDescriptionColor !important;
max-width: inherit !important;
}
.accordion-item__click-target, .accordion-item__description {
padding-left: 25px !important;
padding-right: 25px !important;
}
.accordion-item {
margin-bottom: 23px !important;
box-shadow: 0 0.1rem 0 0 rgba(0, 0, 0, .25);
border: 0.1rem solid @faqv1__AccordionBorderColor;
border-radius:@faqv1__AccordionBorderRadius;
background: @faqv1__AccordionBackgroundColor;
}
.plus {
border: 1px solid currentColor;
border-radius: 50%;
}
.plus, .arrow {
color: @faqv1__IconColor !important;
}
.accordion-item[data-is-open="true"] .accordion-icon-container * {
color: @faqv1__ActiveIconColor !important;
}
.plus__horizontal-line, .plus__vertical-line {
width: 75% !important;
}
/* End: FAQ V1 - Launch Hub Studio */