라이믹스 스케치북 게시판 스크립트, 스타일 도움 부탁드립니다.

게시판 글 쓰기시 텍스트 입력 후 소스 입력 부분에 하단 첨부 스크립트를 붙여 넣기 식으로 글을 쓰고 있습니다.

매번 입력이 번거로워 도움 부탁드립니다.

여러 곳에 삽입해 보았는데 제 수준에서는 해결이 안 되네요. 애드온 같은 걸 의뢰 해야 하나요?

<style> 부분은 위지워 에디터 설정에 입력 하면 되는것 같기는 한테 (사실 안내 문구 중에서 "웹폰트 등의 CSS를 에디터 내부에서 추가로 로딩하려면 한 줄에 하나씩 URL을 입력해 주십시오." 이 부분도 잘 모르겠습니다.) 다른 스크립트 입력 부분도 없어서 질문 드립니다.

아래 적용하려는 스크립트, 스타일 입니다.

<script>
  var buttons = document.querySelectorAll(".toggle-button");

  buttons.forEach(function(button) {
    button.addEventListener("click", function() {
      toggleDetails(button);
    });
  });

  function toggleDetails(button) {
    var content = button.nextElementSibling;

    var activeContents = document.querySelectorAll(".details-content.active");
    activeContents.forEach(function(c) {
      if (c !== content) {
        deactivateContent(c);
      }
    });

    if (content.classList.contains("active")) {
      deactivateContent(content);
    } else {
      activateContent(content);
    }
  }

  function activateContent(content) {
    content.style.maxHeight = content.scrollHeight + "px";
    content.classList.add("active");
  }

  function deactivateContent(content) {
    content.style.maxHeight = null;
    content.classList.remove("active");
  }

  window.addEventListener("resize", function() {
    var activeContents = document.querySelectorAll(".details-content.active");
    activeContents.forEach(function(content) {
      content.style.maxHeight = content.scrollHeight + "px";
    });
  });
</script>

<style>
  .details-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .active {
    max-height: 1000px;
  }
</style>

PS : 오늘부터 ~ 월요일까지 석가탄신일 연휴네요. 비가 많이 온다는데 하여튼 즐거운 연휴 되세요.