Управление исходным состоянием сводки сведений в CSS

HTML-элементы

и

. Эти элементы используются для создания интерактивных виджетов раскрытия информации, в которых пользователи могут нажать на сводку, чтобы просмотреть дополнительную информацию.

При использовании элементов

и

вы можете столкнуться с ситуациями, когда исходное состояние не соответствует ожидаемому, когда детали либо открыты, либо закрыты. когда страница загружается. Есть несколько способов убедиться, что данные закрыты по умолчанию и могут быть открыты или закрыты пользователем:

  1. Селектор CSS: вы можете использовать селекторы CSS, чтобы выбрать элемент
    и установить для его атрибута openзначение false. Например:
details:not([open]) {
  display: none;
}
  1. JavaScript: вы можете использовать JavaScript для управления элементом
    и установить для его свойства openзначение false. Вот пример использования JavaScript:
const detailsElement = document.querySelector('details');
detailsElement.open = false;
  1. Атрибут HTML: вы можете явно установить для атрибута openэлемента
    пустое значение. Например:
<details open="">
  <summary>Summary</summary>
  <p>Additional details</p>
</details>

Используя один или комбинацию этих методов, вы сможете контролировать начальное состояние элемента

и убедиться, что он не открыт по умолчанию.