Simple Spoiler

by profesor08

HTML

<html>
<body>

<div class="spoiler" data-spoiler>
  <button data-spoiler-toggle>Развернуть</button>
  <div data-spoiler-content>
    Я люблю овый год! В этот день случаются чудеса. Я желаю вам в новом году успехов, счастья, любви, много репутации на StackOverflow, новых проэктов и конечно же денег. С наступающим!
  </div>
</div>

<div class="spoiler" data-spoiler>
  <button data-spoiler-toggle>Развернуть</button>
  <div data-spoiler-content>
    Я люблю овый год! В этот день случаются чудеса. Я желаю вам в новом году успехов, счастья, любви, много репутации на StackOverflow, новых проэктов и конечно же денег. С наступающим!
  </div>
</div>

<div class="spoiler" data-spoiler>
  <button data-spoiler-toggle>Развернуть</button>
  <div data-spoiler-content>
    Я люблю овый год! В этот день случаются чудеса. Я желаю вам в новом году успехов, счастья, любви, много репутации на StackOverflow, новых проэктов и конечно же денег. С наступающим!
  </div>
</div>

<div class="spoiler" data-spoiler>
  <button data-spoiler-toggle>Развернуть</button>
  <div data-spoiler-content>
    Я люблю овый год! В этот день случаются чудеса. Я желаю вам в новом году успехов, счастья, любви, много репутации на StackOverflow, новых проэктов и конечно же денег. С наступающим!
  </div>
</div>

</body>
</html>

SCSS

[data-spoiler] {
  
  &[data-spoiler-expanded] {
    [data-spoiler-content] {
      height: auto;
    }
  }
  
  [data-spoiler-content] {
    height: 20px;
    overflow: hidden;
  }
}

JavaScript

const spoilers = document.querySelectorAll("[data-spoiler]:not([data-spoiler-initialized])");

Array.from(spoilers).forEach(spoiler => {
  
  const toggleButton = spoiler.querySelector("[ data-spoiler-toggle]");
  
  if (toggleButton instanceof Element) {
  	toggleButton.addEventListener("click", () => {
    	if (spoiler.hasAttribute("data-spoiler-expanded")) {
      spoiler.removeAttribute("data-spoiler-expanded");
      }
      else {
      	spoiler.setAttribute("data-spoiler-expanded", "");
      }
    });
  }
  
	spoiler.setAttribute("data-spoiler-initialized", "");
});