# Details

A closed passage the person opens if they want: explanations and settings most people do not need.

## Playground

```html
<details class="feitio-details"><summary><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>What is the time zone?</summary><div class="content"><p>It is the local time the product uses to fire reminders.</p></div></details>
```

## When to use

-   For help only some need ("What is the time zone?").
-   For advanced settings almost nobody changes.

## When not to use

-   **What everyone needs to read:** leave it open.
-   **To hide a required field.**
-   **Several in a row, as an accordion:** if everything is closed, nothing gets read.

## Examples

### A question

The content grows and the arrow turns, on the change curve.

Show code

```html
<details class="feitio-details">
  <summary><svg class="feitio-icon" aria-hidden="true">…</svg>O que é o fuso horário?</summary>
  <div class="content"><p>…</p></div>
</details>
```

## Anatomy

1.  **Arrow:** turns down when it opens.
2.  **Summary:** a question or a name, underlined like a link.
3.  **Content:** aligned with the summary text.

## Writing

-   The summary says what is inside. Never "Learn more".

## Accessibility

-   It is the browser’s `<details>`: it opens with the keyboard and screen readers say whether it is open.

## Attributes

Attribute

Values

What for

`class="feitio-details"`

on the `<details>`

The turning arrow and the underlined summary.

`class="content"`

around the content

Aligned with the summary.

`open`

optional

Starts open.