(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>
결과보기
