> For the complete documentation index, see [llms.txt](https://v1-6-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v1-6-0.pipui.ru/components/spoiler.md).

# Спойлеры

```html
<a class="btn" href="#spoiler-example-1" data-spoiler>Показать/Скрыть</a>

<div class="spoiler p-20 mt-20 bg-purple-50 text-purple-200 rad-2" id="spoiler-example-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
```

{% embed url="<https://codepen.io/pipui/pen/mdjRmxZ>" %}
Пример работы кода выше
{% endembed %}

Вы можете управлять скрытием и открытием по отдельности

```html
<a class="btn" href="#spoiler-example-2" data-spoiler-show>Показать</a>
<a class="btn" href="#spoiler-example-2" data-spoiler-hide>Скрыть</a>

<div class="spoiler p-20 mt-20 bg-deep-purple-50 text-deep-purple-200 rad-2" id="spoiler-example-2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
```

{% embed url="<https://codepen.io/pipui/pen/eYjgWrG>" %}
Пример работы кода выше
{% endembed %}

Помимо всего прочего, Вы можете управлять содержимым спойлера через javascript и таким образом кастомизировать спойлеры

В состав компонента входит "аккордеон", который работает аналогично спойлеру, только при открытии одного элемента, закрываются все другие

```html
<div class="accordion">
    <div class="accordion-id active">
        <a href="#" class="accordion-trigger">Accordeon #1</a>
        <div class="accordion-target">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.
        </div>
    </div>

    <div class="accordion-id">
        <a href="#" class="accordion-trigger">Accordeon #2</a>
        <div class="accordion-target">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.
        </div>
    </div>

    <div class="accordion-id">
        <a href="#" class="accordion-trigger">Accordeon #3</a>
        <div class="accordion-target">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.
        </div>
    </div>

    <div class="accordion-id">
        <a href="#" class="accordion-trigger">Accordeon #4</a>
        <div class="accordion-target">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.
        </div>
    </div>
</div>
```

{% embed url="<https://codepen.io/pipui/pen/PoBWmao>" %}
Пример работы кода выше
{% endembed %}