> For the complete documentation index, see [llms.txt](https://ploegert.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ploegert.gitbook.io/til/programmy/react/details-tags-are-a-controllable-component.md).

# Details Tags Are A Controllable Component

HTML has a lovely, but little-used tag for summarizing a set of collapsed details. These details can be expanded and recollapsed by clicking the summary. This is the `<details>` tag and it can be controlled with the `open` prop and `onToggle` handler.

```jsx
import React, { useState } from "react";

export default function Details({ summary, children, onToggle }) {
  const [open, setOpen] = useState(false);

  return (
    <details
      open={open}
      onToggle={() => {
        setOpen(prev => !prev);
        onToggle();
      }}
    >
      <summary>{summary}</summary>
      {children}
    </details>
  );
}
```

[live example](https://codesandbox.io/s/loving-merkle-hxlut?file=/src/App.js:0-545), [source](https://github.com/facebook/react/issues/15486)