자바스크립트로 슬라이드 토글 기능 만들기 (SlideUp / SlideDown)

 

 

웹 페이지에서 콘텐츠를 부드럽게 숨기거나 표시하는 기능은 사용자 경험을 향상시키는 핵심 요소입니다. 특히 SlideUp 과 SlideDown 효과는 직관적인 UI를 구현할 때 큰 도움이 됩니다. 이 글에서는 jQuery와 순수 JavaScript(바닐라 JS)를 사용한 슬라이드 토글 기능 구현 방법을 소개합니다.

 

💡 jQuery로 슬라이드 토글 구현

jQuery에서는 .slideUp(), slideDown(), .slideToggle() 메서드를 사용해 간편하게 구현할 수 있습니다.

$(document).ready(function() {
    $("#toggleButton").click(function() {
        $("#content").slideToggle(500); // 500ms 동안 슬라이드
    });
});

 

위 코드에서는 버튼 클릭 시 #content 요소가 슬라이드되며 표시되거나 숨겨집니다.

 

💡 순수 JavaScript (Pure JS)로 슬라이드 효과 구현

jQuery 없이 순수 JavaScript로 슬라이드 효과를 구현하려면 CSS와 JavaScript를 함께 활용해야 합니다.

function slideToggle(element, duration = 500) {
    let el = document.querySelector(element);
    if (!el) return;

    if (el.style.maxHeight) {
        el.style.maxHeight = null;
    } else {
        el.style.maxHeight = el.scrollHeight + "px";
    }
}

// 사용 예시
document.getElementById("toggleButton").addEventListener("click", function() {
    slideToggle("#content");
});

 

위 코드에서는 maxHeight 속성을 활용해 #content 요소의 높이를 부드럽게 조정하며 슬라이드 효과를 구현합니다.

 

💡 바닐라 JavaScript로 부드러운 SlideUp/SlideDown 구현

바닐라 JavaScript를 사용해 좀 더 세밀한 애니메이션을 구현할 수도 있습니다. requestAnimationFrame() 을 활용하면 보다 자연스러운 움직임을 연출할 수 있습니다.

function slideUp(element, duration = 300) {
    let el = document.querySelector(element);
    el.style.display = "block";
    content.style.overflow = "hidden";
    let height = "0";
    el.style.height = el.scrollHeight + "px";
    setTimeout(() => {
        el.style.transition = `height ${duration}ms ease-in-out`;
        el.style.height = height + "px";
    }, 10);
    console.log(el.scrollHeight);
}

function slideDown(element, duration = 300) {
    let el = document.querySelector(element);
    el.style.display = "block";
    content.style.overflow = "hidden";
    let height = el.scrollHeight;
    el.style.height = "0px";
    setTimeout(() => {
        el.style.transition = `height ${duration}ms ease-in-out`;
        el.style.height = height + "px";
    }, 10);
    console.log(height);
}

// 사용 예시
document.getElementById("toggleButton").addEventListener("click", function () {
    let content = document.querySelector("#content");

    if (content.style.display === "none" || content.style.height === "0px") {
        slideDown("#content");
    } else {
        slideUp("#content");
    }
});

 

위 코드에서는 height 속성을 활용해 콘텐츠가 부드럽게 펼쳐지고 접히도록 설정했습니다. jQuery 없이도 애니메이션 효과를 더욱 정교하게 다룰 수 있습니다.

 

💡 슬라이드 속도 조절

현재는 고정된 속도로 슬라이드되지만, 사용자 입력에 따라 속도를 변경할 수 있도록 설정할 수도 있습니다. 이를 위해 duration 값을 동적으로 변경할 수 있습니다.

let speed = 500; // 기본 속도
document.getElementById("speedControl").addEventListener("change", function(event) {
    speed = event.target.value;
});

document.getElementById("toggleButton").addEventListener("click", function() {
    slideToggle("#content", speed);
});

 

💡 자동 슬라이드 (일정 시간 후 숨김)

페이지 로드 후 일정 시간이 지나면 자동으로 콘텐츠가 숨겨지도록 설정할 수도 있습니다.

setTimeout(() => {
    slideUp("#content", 1000);
}, 5000); // 5초 후 콘텐츠 숨김

 

💡 다중 요소 슬라이드

한 번의 버튼 클릭으로 여러 개의 요소를 동시에 슬라이드 할 수 있습니다.

document.getElementById("toggleButton").addEventListener("click", function() {
    document.querySelectorAll(".slide-item").forEach(item => {
        slideToggle(item, 500);
    });
});

 

💡 부드러운 페이드 효과 추가

슬라이드와 함께 opacity 를 조정하여 부드러운 페이드 효과를 줄 수도 있습니다.

function slideFadeToggle(element, duration = 500) {
    let el = document.querySelector(element);
    if (!el) return;

    el.style.transition = `height ${duration}ms ease-in-out, opacity ${duration}ms ease-in-out`;
    if (el.style.opacity == 0 || el.style.display === "none") {
        el.style.display = "block";
        el.style.opacity = 1;
        el.style.height = el.scrollHeight + "px";
    } else {
        el.style.opacity = 0;
        el.style.height = "0px";
        setTimeout(() => {
            el.style.display = "none";
        }, duration);
    }
}

// 사용 예시
document.getElementById("toggleButton").addEventListener("click", function() {
    slideFadeToggle("#content");
});

 

💡 스크롤 위치에 따른 자동 슬라이드

사용자가 특정 위치까지 스크롤하면 자동으로 콘텐츠가 나타나거나 사라지게 만들 수도 있습니다.

window.addEventListener("scroll", function() {
    let content = document.querySelector("#content");
    if (window.scrollY > 200) {
        slideDown("#content");
    } else {
        slideUp("#content");
    }
});

 

이러한 추가 기능을 조합하면 더욱 직관적이고 인터랙티브한 사용자 경험을 구현할 수 있습니다! 😊

 

💡 마무리

슬라이드 애니메이션은 인터랙티브한 UI를 제작하는 데 매우 유용합니다.

jQuery를 활용하면 간단하게 구현할 수 있지만,

순수 JavaScript와 바닐라 JavaScript를 활용하면 좀 더 세밀한 조작이 가능합니다.

프로젝트의 요구 사항에 맞춰 적절한 방법을 선택하세요!