# FAQ Accordion Styles (SCSS)

> Styles collapsible FAQ items (from the FAQ list and ACF FAQ shortcodes, or any Details block) with dividers, a plus/minus marker and a visible keyboard focus ring.

- Type: SCSS
- Runs: Site-wide header
- Category: [Custom Post Types & Fields](https://wpide.com/library/category/post-types/)
- Tags: scss, faq, accordion
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/faq-accordion-scss/

## Code

```scss
$divider: color-mix(in srgb, currentColor 15%, transparent);
$focus: #2271b1;

.faq-item,
.acf-faq-item,
.wp-block-details {
    border-bottom: 1px solid $divider;

    summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 1rem 0;
        font-weight: 600;
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker {
            display: none;
        }

        &::after {
            content: "+";
            flex-shrink: 0;
            font-size: 1.4em;
            line-height: 1;
        }

        &:focus-visible {
            outline: 2px solid $focus;
            outline-offset: 2px;
        }
    }

    &[open] summary::after {
        content: "\2212";
    }

    > :not(summary) {
        padding-bottom: 1rem;
    }
}
```

## Notes

Targets .faq-item, .acf-faq-item and the Details block.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "FAQ Accordion Styles (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/