Спойлеры

<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>

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

<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>

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

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

<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>
PreviousХлебные крошкиNextТаблицы

Last updated