[js] JS - JavaScript로 (SlideUp/SlideDown) (FadeOut/FadeIn) 토글 버튼 구현 ※ 순수 자바스크립트로 (슬라이드업/슬라이드다운) (페이드아웃/페이드인) toggle button

(SlideUp/SlideDown) (FadeOut/FadeIn) 토글 버튼 

 

<style>

#hz {

  width: 200px;

  height: 100px;

  background-color: #3498db;

  color: white;

  text-align: center;

  display: block;

}

</style>

<div id="hz">홈짱닷컴 Homzzang.com</div>

<button id="toggleSlideButton">Toggle Slide</button>

<button id="toggleFadeButton">Toggle Fade</button>

<script>

document.addEventListener("DOMContentLoaded", function() {

    const hz = document.querySelector("#hz");

    const toggleSlideButton = document.getElementById("toggleSlideButton");

    const toggleFadeButton = document.getElementById("toggleFadeButton");

    let isSlideVisible = true;

    let isFadeVisible = true;

    toggleSlideButton.addEventListener("click", function() {

        hz.style.transition = "height 0.5s ease";

        if (isSlideVisible) {

           hz.style.height = "0";

        } else {

           hz.style.height = "100px";

        }

        isSlideVisible = !isSlideVisible;

    });

    toggleFadeButton.addEventListener("click", function() {

         hz.style.transition = "opacity 0.5s ease";

         if (isFadeVisible) {

            hz.style.opacity = "0";

         } else {

            hz.style.opacity = "1";

        }

        isFadeVisible = !isFadeVisible;

    });

});

</script>

결과보기