Компонент показывает и скрывает связанное содержимое по кнопкам и отражает
состояние для экранного диктора. Для простого раскрываемого блока сначала
рассмотрите нативные details и summary, для группы раскрываемых разделов —
аккордеон.
Пример
Тариф включает до десяти участников и 50 ГБ хранилища.
HTML
<divclass="sf-hide-show flex flex-col items-start gap-2">
<divclass="flex flex-wrap gap-1">
<buttontype="button"class="sf-button sf-button--default sf-button--primary sf-button--size-1"data-action="show"><spanclass="sf-button-text-container">Показать подробности</span></button>
<buttontype="button"class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"data-action="hide"><spanclass="sf-button-text-container">Скрыть подробности</span></button>
</div>
<divclass="bg-surface-container p-2 radius-2"data-content>Тариф включает до десяти участников и 50 ГБ хранилища.</div>
</div>
Разметка
Минимальную разметку показывает пример выше: корень sf-hide-show, кнопки с
атрибутом data-action и содержимое с атрибутом data-content внутри него.
data-action принимает show, hide или toggle. Кнопки и содержимое
лежат внутри одного корня; вложенный sf-hide-show управляет только своими
частями.
Содержимых может быть несколько — все они показываются и скрываются вместе.
Без data-content содержимым считаются все потомки корня, кроме кнопок.
Состояние скрипт пишет в data-state корня: shown или hidden.
У компонента нет своего CSS: скрытие задаёт нативный атрибут hidden, а
раскладку — утилиты.
Варианты
Кнопки
Пара кнопок show и hide подходит, когда у действий разный текст: скрипт
прячет кнопку, действие которой уже выполнено, и переносит фокус на вторую.
Одна кнопка toggle переключает состояние и остаётся на месте.
Пояснение показывает и скрывает одна кнопка.
HTML
<divclass="sf-hide-show flex flex-col items-start gap-2">
<buttontype="button"class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"data-action="toggle"><spanclass="sf-button-text-container">Пояснение</span></button>
<divclass="bg-surface-container p-2 radius-2"data-content>Пояснение показывает и скрывает одна кнопка.</div>
</div>
Состояния
Скрыто
Чтобы содержимое не показывалось с загрузки, задайте корню data-state="hidden"
или содержимому атрибут hidden — тогда содержимое не мелькает до запуска
скрипта.
Условия возврата действуют четырнадцать дней с даты покупки.
HTML
<divclass="sf-hide-show flex flex-col items-start gap-2"data-state="hidden">
<divclass="flex flex-wrap gap-1">
<buttontype="button"class="sf-button sf-button--default sf-button--primary sf-button--size-1"data-action="show"><spanclass="sf-button-text-container">Показать условия</span></button>
<buttontype="button"class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"data-action="hide"><spanclass="sf-button-text-container">Скрыть условия</span></button>
</div>
<divclass="bg-surface-container p-2 radius-2"data-contenthidden>Условия возврата действуют четырнадцать дней с даты покупки.</div>
</div>
Доступность
Каждая кнопка получает aria-controls со списком id содержимого и
aria-expanded по текущему состоянию; содержимому без id скрипт задаёт
его сам.
Скрытое содержимое получает атрибут hidden: оно не видно и не читается
экранным диктором.
Когда кнопка пары прячется после нажатия, фокус переходит на вторую кнопку
и не теряется.
Текст кнопки называет действие или содержимое: «Показать условия», а не
«Ещё».
JavaScript
Скрипт компонента находит корни .sf-hide-show при загрузке страницы и в
добавленной позже разметке. Перед каждым изменением на корне возникает
всплывающее событие sf-hide-show:change с полями action (show, hide
или toggle), hidden и shown (новое состояние) в detail;
preventDefault() отменяет изменение.
HTML
<divclass="sf-hide-show flex flex-col items-start gap-2"data-hide-show-cancel-demo>
<buttontype="button"class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1"data-action="toggle"><spanclass="sf-button-text-container">Скрыть форму</span></button>
<divclass="bg-surface-container p-2 radius-2"data-content>В форме есть несохранённые изменения, поэтому она не скрывается.</div>
<pclass="m-0"role="status"data-hide-show-cancel-result></p>
</div>
document.querySelector('#filters').addEventListener('sf-hide-show:change', (event) => {
if (event.detail.hidden &&hasUnsavedChanges()) event.preventDefault();
});
Компонент регистрирует класс HideShow: new HideShow(root).init()
подключает корень вручную, методы show(), hide() и toggle() меняют
состояние с тем же событием. SF.Loader.ready('HideShow', callback) передаёт
класс после события sf-loader-init. Классы sf-show, sf-hide и
sf-hide-show-content — другие имена data-action="show",
data-action="hide" и data-content.
