Интерактивные элементы

6.1 Тег <details>

HTML5 добавил элементы <details> и <summary>, которые предназначены для создания интерактивных раскрывающихся блоков. Эти элементы позволяют пользователям разворачивать и сворачивать содержимое, улучшая взаимодействие с пользователем и экономя место на веб-странице.

Элемент <details> используется для создания блока, который можно раскрыть или свернуть. Внутри него можно размещать любой HTML-контент. При раскрытии <details> отображается вложенный контент, а при сворачивании — скрывается.

Синтаксис:

    
      <details>
        <summary>Заголовок</summary>
        <!-- Скрытое содержимое -->
      </details>
    
  

Атрибут open:

Если атрибут присутствует, блок <details> будет раскрыт по умолчанию.

Пример использования <details>

    
      <details open>
        <summary>Основная информация</summary>
        <p>Эта информация видна по умолчанию, так как атрибут open установлен.</p>
      </details>
    
  

Объяснение

• <details>: создает контейнер для скрытого содержимого.
• <summary>: определяет заголовок, который виден всегда и на который можно нажать, чтобы раскрыть или свернуть содержимое.

6.2 Тег <summary>

Элемент <summary> используется внутри <details> для создания заголовка. Этот заголовок всегда виден и служит элементом управления для раскрытия или сворачивания содержимого блока <details>.

Синтаксис:

    
      <details>
        <summary>Заголовок</summary>
        <!-- Скрытое содержимое -->
      </details>
    
  

Пример использования:

    
      <details>
        <summary>Подробнее</summary>
        <p>Это скрытое содержимое, которое становится видимым при раскрытии блока.</p>
      </details>
    
  

Преимущества использования <details> и <summary>

1. Улучшение пользовательского опыта: пользователи могут самостоятельно контролировать, какой контент они хотят видеть.
2. Экономия пространства: скрытие большого количества информации за интерактивными заголовками.
3. Семантическая разметка: улучшение структуры HTML-документа и улучшение его доступности для пользователей и поисковых систем.

6.3 Взаимодействие с JavaScript

Элементы <details> и <summary> можно легко контролировать с помощью JavaScript для создания более интерактивных веб-страниц.

Пример использования JavaScript:

    
      <details>
        <summary>Подробнее</summary>
        <p>Это скрытое содержимое, которое становится видимым при раскрытии блока.</p>
      </details>
      <details open>
        <summary>Основная информация</summary>
        <p>Эта информация видна по умолчанию, так как атрибут open установлен.</p>
      </details>
      <button id="toggleDetails">Свернуть/развернуть</button>
    
  

    
      // Находим кнопку с id 'toggleDetails' и добавляем обработчик события 'click'
      document.getElementById('toggleDetails').addEventListener('click', () => {
        // Находим все элементы 'details' на странице
        document.querySelectorAll('details').forEach(detail => {
          // Инвертируем значение свойства 'open' каждого элемента 'details'
          detail.open = !detail.open; 
        });
      });
    
  

Объяснение:

• Кнопка "Свернуть/развернуть": управляет состоянием всех элементов <details> на странице
• Событие click: переключает атрибут open для всех элементов <details>

1

Задача

Модуль 1: Web Core, 6 уровень, 5 лекция

Недоступна

Раскрывающийся блок

Раскрывающийся блок

Открыть

1

Задача

Модуль 1: Web Core, 6 уровень, 5 лекция

Недоступна

Интерактивный блок

Интерактивный блок

Открыть