# Accordion Style for the Details Block (SCSS)

> Styles the core Details block as a polished accordion with borders, a rotating plus icon and comfortable spacing, so FAQs look finished without a plugin.

- Type: SCSS
- Runs: Site-wide header
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: scss, details, accordion
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/details-block-accordion-scss/

## Code

```scss
$border: rgba(0, 0, 0, 0.15);
$accent: #2271b1;

.wp-block-details {
    margin: 0;
    padding: 0;
    border: 1px solid $border;

    & + .wp-block-details {
        border-top: 0;
    }

    summary {
        position: relative;
        padding: 1em 3em 1em 1.25em;
        font-weight: 600;
        list-style: none;
        cursor: pointer;

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

        &::after {
            content: "+";
            position: absolute;
            top: 50%;
            right: 1.25em;
            font-size: 1.4em;
            line-height: 1;
            transform: translateY(-50%);
            transition: transform 0.2s ease;
        }

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

    &[open] summary::after {
        transform: translateY(-50%) rotate(45deg);
    }

    > :not(summary) {
        margin: 0;
        padding: 0 1.25em 1em;
    }
}
```

## Notes

Consecutive Details blocks join into one accordion list.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Accordion Style for the Details Block (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/