> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/containers/spoiler.md).

# Spoiler

Spoiler is a container which hides or shows child elements by clicking on the header. If spoiler is not opened child content is not mounted. 

```typescript
import { Spoiler, Paragraph } from 'react-ui';

return <Spoiler label="Header">
    <Paragraph>Content</Paragraph>
</Spoiler>
```

## Altrone Options

In **Altrone 2.2** spoiler got a new configuration options ([read more](#altrone-options)). To achieve this, you can leverage either `global.reduceMotion` or `spoiler.reduceMotion`, effectively deactivating transitions for all spoilers throughout your application.

## Properties

| Property                                                                                             | Type      | Description                                                                     |
| ---------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------- |
| **`label`**<mark style="color:red;">**`*`**</mark>                                                   | `string`  | Header of the spoiler                                                           |
| **`openedByDefault`**                                                                                | `boolean` | If true the spoiler is opened on the initial rendering. Default value is `true` |
| **`reduceMotion`**&#x20;**&#x20;**<mark style="color:purple;background-color:purple;">**new**</mark> | `boolean` | Deactivate all animations. Default value is `false`                             |

## History

* **`Altrone 2.2`**:
  * added `reduceMotion` config option
  * added `reduceMotion` prop
* **`Altrone 2.0`**: initial release