Акордеони (Accordions):

<div class="hud-accordion-v1">
  <details>
    <summary>
      <span>Яка столиця України?</span>
      <svg class="icon chevron"><use href="#arr-u"></use></svg>
    </summary>
    <div class="details-content">
      <p>Київ — найбільше місто України та її столиця, культурний, політичний та науковий центр.</p>
    </div>
  </details>
  <details>
    <summary class="s6">
      <span>Який рівень доступу потрібен?</span>
      <svg class="icon chevron"><use href="#arr-u"></use></svg>
    </summary>
    <div class="details-content">
      <p>Для отримання повної інформації потрібен рівень доступу "Альфа-3" або вище.</p>
    </div>
  </details>
</div>

<div class="hud-accordion-v2">
  <details>
    <summary>
      <svg class="icon plus"><use href="#plus"></use></svg>
      <span>Яка столиця України?</span>
    </summary>
    <div class="details-content">
      <p>Київ — найбільше місто України та її столиця.</p>
    </div>
  </details>
  <details>
    <summary class="s5">
      <svg class="icon plus"><use href="#plus"></use></svg>
      <span>Час до прибуття підкріплення?</span>
    </summary>
    <div class="details-content">
      <p>Розрахунковий час: 12 стандартних циклів.</p>
    </div>
  </details>
</div>

<div class="hud-accordion-v3">
  <details>
    <summary>
      <span>Яка столиця України?</span>
      <s class="v3-data">0xF1 // 97.3%</s>
      <div class="v3-indicator"></div>
    </summary>
    <div class="details-content">
      <p>Київ — найбільше місто України та її столиця.</p>
    </div>
  </details>
</div>