Disclosure

@use '@natachah/vanilla-frontend/scss/components/disclosure';

Syntax

The disclosure is using the native <details> and <summary> tags.

html

<details>
    <summary>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path></svg>
        Title
    </summary>
    <div>
        Content
    </div>
</details>

css properties

--disclosure-color
--disclosure-background
--disclosure-border-size
--disclosure-border-style
--disclosure-border-color
--disclosure-border-radius
--disclosure-padding-inline
--disclosure-padding-block
--disclosure-transition
--disclosure-decoration
--disclosure-svg-transform

TIP

It's recommended to add a <div> around the inside content for better design.

States

The <summary> can have multiple states as :hover, :focus, and:active.

Hover

The <summary> use a default focus style, but you can customize it with :

--disclosure-hover-color
--disclosure-hover-background
--disclosure-hover-border-color

Focus

The <summary> use a default focus style, but you can customize it with :

--disclosure-focus-color
--disclosure-focus-background
--disclosure-focus-border-color

You can also customize the outline :

--disclosure-outline-size
--disclosure-outline-style
--disclosure-outline-color
--disclosure-outline-offset

Active

The active state is automatically displayed when the disclosure is open.

--disclosure-active-color
--disclosure-active-background
--disclosure-active-border-color

Variants

The disclosure has a variation to play with.

Accordion

You can group some disclosures by putting them in a <div> with the class .accordion.

<div class="accordion" style="--disclosure-border-color:black">
    <details>
        <summary>
            Disclosure A
        </summary>
        <div>
            AAA
        </div>
    </details>
    <details>
        <summary>
            Disclosure B
        </summary>
        <div>
            BBB
        </div>
    </details>
    <details>
        <summary>
            Disclosure C
        </summary>
        <div>
            CCC
        </div>
    </details>
</div>