Інтерактивні елементи

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>