Accordion Block

Description

The audio block is used to display text content in collapsible sections. This is a great way to structure text-heavy content like FAQs.

    • FAQs

    • Product offerings

  • This is a great block for text-heavy content. It helps keep your page short and reduce scrolling for your visitors.

  • Everyone! It is available in both 7.0 and 7.1. Also available in Classic Editor and Fluid Engine.

Custom CSS

For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.

Advanced Code Injection

For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:

<style>

.sqs-block-accordion .accordion-item {
}

</style>
 

Custom CSS

To target the entire accordion block

/* accordion block */
.sqs-block-accordion .accordion-items-container {	
}

To target the items

/* accordion items */
.sqs-block-accordion .accordion-item {
}

To target the dividers

/* all dividers */
.sqs-block-accordion .accordion-divider {
}

/* top divider */
.sqs-block-accordion .accordion-divider--top {
}

To target the accordion item title

/* accordion title */
.sqs-block-accordion .accordion-item__title {
}

To target the icon (+ or v)

/* accordion icon */
.sqs-block-accordion .accordion-icon-container {
}

To target the dropdown section

/* accordion dropdown */
.sq.sqs-block-accordion .accordion-item__dropdown {
}

To target the item description

/* accordion description */
.sqs-block-accordion .accordion-item__description {
}
7.0, 7.1Cristina TiosecoAccordion