<div class=wrapper>
  <h1><i class="fas fa-bug"></i>Element HTML5 &quot;Details&quot</h1>
  <button type=button onclick="details.open=!details.open">Toggle details</button>
  <div>
    <details id="details" class="details" open ontoggle="events.innerText = `Toggle! open: ${event.target.open}\n${events.innerText}`">
      <summary class=details-summary>
        <div class=details-summary-inner>
          <div class=details-summary-inner-marker>
            <i class="close fas fa-chevron-circle-up"></i>
            <i class="open fas fa-chevron-circle-down"></i>
          </div>
          <div class=details-summary-label>
            Details block title
          </div>
        </div>
      </summary>
      <div class="details-content">
        <ul>
          <li>Details content here</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique euismod ornare. Ut eget pretium nulla, sed lobortis massa. Donec mi erat, hendrerit feugiat velit quis, tempus laoreet purus. Integer suscipit semper ligula at rhoncus.
            Phasellus viverra, velit id malesuada mollis, justo leo ornare odio, at suscipit est nisi at magna.</li>
          <li>Proin non lacinia lectus. Sed a neque feugiat, tempus arcu et, hendrerit elit. Sed molestie eleifend nunc, sit amet volutpat elit convallis quis. Fusce in est porta, suscipit urna sed, luctus ipsum. Nam sed vestibulum purus, at tempor felis.
            Maecenas sit amet neque pharetra, iaculis magna in, iaculis nunc. Proin in commodo libero. Quisque convallis vitae elit nec sollicitudin. Vestibulum ac malesuada nunc. Aenean ac ligula tempor, pulvinar ligula id, euismod mauris.</li>
        </ul>
        <p>
          Suspendisse nec nibh erat. Integer vehicula sed ante eget rhoncus. Fusce ultricies risus vel odio scelerisque, ut faucibus dui facilisis. Aenean sed pellentesque mi, id rhoncus nulla. Vestibulum finibus, arcu in bibendum hendrerit, libero neque sollicitudin
          urna, vel fringilla nibh ex eget neque. Donec vitae purus ullamcorper, tempus nulla eget, accumsan nisi. Maecenas malesuada sapien nisi, vitae consectetur eros cursus vitae. Aliquam ultrices orci quis vestibulum aliquam. Curabitur et convallis
          massa, non tristique lacus. Nullam feugiat elementum elit, vel luctus mauris mattis non. Duis dolor lacus, ultrices in mauris nec, auctor blandit massa.
        </p>
        <p>
          Curabitur at congue magna, eget imperdiet lorem. Proin consectetur vulputate vestibulum. Donec luctus nibh eu turpis maximus, laoreet accumsan risus pellentesque. Etiam a eros et turpis condimentum cursus ut at urna. Morbi faucibus ornare lacus in molestie.
          Donec faucibus lectus euismod augue finibus aliquet. Mauris interdum sollicitudin turpis, vitae commodo orci. Etiam quis orci a elit vestibulum rhoncus sed in leo. Maecenas bibendum libero dignissim odio lacinia, placerat feugiat dolor pulvinar.
          Maecenas bibendum elementum mauris at vulputate. Vivamus venenatis velit tellus, id varius justo tempor eget. Donec eu feugiat leo, eget dictum nisi.
        </p>
      </div>
    </details>
  </div>
  <div>
    <h2>Events</h2>
    <pre id=events></pre>
  </div>
</div>