0Pricing
HTML Academy · Урок

details и summary: виджет раскрытия

Создавайте встроенные компоненты раскрытия и сворачивания без JavaScript

«details и summary: виджет раскрытия» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что такое details и краткое описание

Элементы <details> и <summary> создают встроенный виджет раскрытия — компонент разворачивания и сворачивания — без JavaScript:

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language
     used to create web pages.</p>
</details>

Как это работает

Поведение при взаимодействии:

  • По умолчанию видно только <summary>
  • Щелчок по краткому описанию переключает видимость остального содержимого
  • По умолчанию рядом с кратким описанием отображается треугольник раскрытия
  • JavaScript не требуется

Атрибут open

Атрибут open предварительно раскрывает элемент details:

<details open>
  <summary>Installation instructions</summary>
  <ol>
    <li>Download the installer</li>
    <li>Run the installer</li>
    <li>Restart your computer</li>
  </ol>
</details>
<!-- open is a boolean attribute: presence = expanded -->
<!-- Remove it to start collapsed -->

Создание раздела часто задаваемых вопросов

Разделы часто задаваемых вопросов — идеальный вариант использования:

<h2>Frequently Asked Questions</h2>

<details>
  <summary>Is HTML5 a programming language?</summary>
  <p>No. HTML5 is a markup language that defines the structure and meaning
     of web content. Programming languages like JavaScript add logic and behavior.</p>
</details>

<details>
  <summary>Do I need to close void elements?</summary>
  <p>In HTML5, void elements like &lt;img&gt; and &lt;br&gt; do not require
     a closing slash. Both &lt;br&gt; and &lt;br /&gt; are valid.</p>
</details>

Оформление details и краткого описания

Настройте внешний вид:

details {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;   /* remove default triangle */
}

summary::before {
  content: '▶ ';      /* custom arrow */
}

details[open] > summary::before {
  content: '▼ ';      /* rotate when open */
}

Удаление стандартного треугольника

Треугольник раскрытия добавляется с помощью list-style:

/* Remove the default arrow: */
summary {
  list-style: none;
}

/* Firefox: */
summary::-webkit-details-marker {
  display: none;
}

/* Then add a custom indicator: */
summary::after {
  content: '+';
  float: right;
}
details[open] summary::after {
  content: '−';
}

Событие переключения

Отслеживайте открытие и закрытие с помощью события toggle:

const details = document.querySelector('details');

details.addEventListener('toggle', () => {
  if (details.open) {
    console.log('Details opened');
    // Track analytics, load content, etc.
  } else {
    console.log('Details closed');
  }
});

Аккордеон с помощью details

Создайте простой аккордеон, в котором одновременно открыта только одна панель:

/* Pure CSS accordion using details: */
/* Each item is a details element */
/* For exclusive open, use JavaScript: */

const allDetails = document.querySelectorAll('details');
allDetails.forEach(d => {
  d.addEventListener('toggle', () => {
    if (d.open) {
      allDetails.forEach(other => {
        if (other !== d) other.removeAttribute('open');
      });
    }
  });
});

Доступность details и краткого описания

Встроенные возможности доступности:

  • Краткое описание получает фокус клавиатуры и активируется клавишей ввода или пробелом
  • Программы чтения с экрана объявляют текст краткого описания и состояние раскрытия
  • Скрытое содержимое находится в DOM, но объявляется скрытым до раскрытия

Атрибут name для исключающего аккордеона

В HTML 2025 у details появился атрибут name для встроенного аккордеона, в котором открыта только одна панель:

<details name="faq">
  <summary>Question 1</summary>
  <p>Answer 1...</p>
</details>

<details name="faq">
  <summary>Question 2</summary>
  <p>Answer 2...</p>
</details>
<!-- details with the same name act as a group -->
<!-- Opening one closes the others automatically -->
<!-- Supported in Chrome 120+ and Firefox 130+ -->

Отложенная загрузка содержимого с помощью переключения

Загружайте содержимое только при открытии details:

<details id="advanced">
  <summary>Load advanced settings...</summary>
  <div id="advanced-content">Loading...</div>
</details>

<script>
const d = document.getElementById('advanced');
d.addEventListener('toggle', async () => {
  if (d.open) {
    const res = await fetch('/api/settings');
    const html = await res.text();
    document.getElementById('advanced-content').innerHTML = html;
    d.removeEventListener('toggle', arguments.callee);
  }
}, { once: true });
</script>

Быстрая проверка

Какой элемент задаёт постоянно видимый текст элемента управления в виджете раскрытия details?

Повторение: детали и краткий обзор

Основные сведения о виджете раскрытия:

  • <details> + <summary> — нативное раскрытие и сворачивание без JavaScript
  • Атрибут open — раскрытие по умолчанию
  • Событие переключения — реакция на открытие и закрытие
  • Стилизуйте с помощью CSS; уберите стандартный треугольник, задав для списка стиль «нет»
  • Атрибут name — взаимоисключающий аккордеон (Chrome 120+)

Часто задаваемые вопросы

Урок «details и summary: виджет раскрытия» бесплатный?

Да — полный текст урока «details и summary: виджет раскрытия» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «details и summary: виджет раскрытия»?

Создавайте встроенные компоненты раскрытия и сворачивания без JavaScript Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «details и summary: виджет раскрытия»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. aside: дополнительное содержимое
  2. figure и figcaption: повторение
  3. details и summary: виджет раскрытия
  4. Элементы progress и meter
← Назад к HTML Academy