Css Accordion Component

Jurgen 4 minutes to read

A mobile first accordion component without javascript

The accordion is a nice way to present summarized content in a space saving format. Again, this can not be must read content. The details/summary is used as a switcher and label, and in this setup it does contain the content. That is placed in a div with the class="inner" This way the content can be animated smooth and cross browser and not jumpy like with the allow-discrete. By using the details/summary we get the build in accessibility and the hidden-until-found functionality. If the same name is used for all details in the accordion the items auto close when opening a new one. The open property can be used to show the content on pageload.

Html setup for the component.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<section class="faq accordion" style="--acc-summary-icon-position: right;">
    <details name="faq" open>
        <summary>1. Lorem ipsum dolor sit amet
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/>
            </svg>
        </summary>
        <div class="inner">
            <u>Content for faq 1.</u> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </details>
    <details name="faq">
        <summary>2. Lorem ipsum dolor sit amet
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/>
            </svg>
        </summary>
        <div class="inner">
            <u>Content for faq 2.</u> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </details>
    <details name="faq">
        <summary>3. Lorem ipsum dolor sit amet
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/>
            </svg>
        </summary>
        <div class="inner">
            <u>Content for faq 3.</u> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </details>
</section>

The css contains the most of the functionality:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

@layer utitlities {
    .accordion {
        container-name: accrdn;
        --acc-width: 36rem;
        --acc-spacing: 0.25rem;
        --acc-radius: 0.75rem;
        --acc-background: oklch(1 0 90);
        --acc-border-width: 1px;
        --acc-border-color: oklch(0.752 0.013 325.702);
        --acc-slide-timing: 0.35s;
        --acc-icon-order: -1;
        --acc-icon-color: oklch(0.628 0.258 29.234);
        --acc-icon-justify: space-between;
        --acc-icon-size: 1.5rem;
        --acc-summary-gap: 1cap;
        --acc-summary-icon-position: left;

        @media (prefers-reduced-motion: reduce) {
            --acc-slide-timing: 0s;
        }

        border-block-start: var(--acc-border-width) solid var(--acc-border-color);
        border-inline: var(--acc-border-width) solid var(--acc-border-color);
        width: fit-content;

        :is(details) {
            background-color: var(--acc-background);
            border-block-end: var(--acc-border-width) solid var(--acc-border-color);
            margin: 0;
            padding: calc(var(--acc-spacing) * 2) calc(var(--acc-spacing) * 3);
            max-width: var(--acc-width);

            summary {
                align-items: center;
                cursor: pointer;
                display: flex;
                font-weight: 600;
                gap: var(--acc-summary-gap);

                svg {
                    color: var(--acc-icon-color);
                    flex-shrink: 0;
                    height: var(--acc-icon-size);
                    width: var(--acc-icon-size);
                    transition: var(--acc-slide-timing) rotate linear;
                }

                @container accrdn style(--acc-summary-icon-position: right){
                    justify-content: var(--acc-icon-justify);
                }

                @container accrdn style(--acc-summary-icon-position: left){
                    justify-content: unset;

                    svg {
                        margin-inline-start: calc(var(--acc-spacing) * -1.5);
                        order: -1;
                    }
                }

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

            .inner {
                overflow: hidden;
                padding: 0;
                transition: padding 0.3s ease-out;
            }

            &::details-content {
                content-visibility: visible;
                display: grid;
                grid-template-rows: 0fr;
                max-width: 100%;
                transition: 0.5s opacity linear,
                var(--acc-slide-timing) grid-template-rows ease-out;
            }

            &:not([open]) {
                summary {
                    svg {
                        rotate: 0deg;
                    }
                }

                .inner {
                    padding-block: 0;
                }

                &::details-content {
                    display: grid;
                    opacity: 0;
                    grid-template-rows: 0fr;
                    content-visibility: visible;
                }
            }

            &[open] {
                summary {
                    svg {
                        rotate: 180deg;
                    }
                }

                .inner {
                    padding-block: 0.75em;
                }

                &::details-content {
                    content-visibility: visible;
                    display: grid;
                    opacity: 1;
                    grid-template-rows: 1fr;
                }
            }

            @starting-style {
                &::details-content {
                    content-visibility: visible;
                    display: grid;
                    opacity: 0;
                    grid-template-rows: 0fr;
                }
            }
        }
    }
}

Below in the files is the complete html setup.

Direct links to the file: Html styled result