[jQuery] 11. slideDown(), slideUp(), slideToggle() 사용법

지난 글에서는 jQuery의 fadeIn(), fadeOut(), fadeToggle()을 사용해서 요소가 서서히 나타나고 사라지는 효과를 알아봤습니다.

이번 글에서는 요소가 위아래로 접히거나 펼쳐지는 효과를 만들 때 사용하는 slideDown(), slideUp(), slideToggle()에 대해 알아보겠습니다.

slide 효과는 FAQ, 메뉴 열기/닫기, 설명 박스, 아코디언 UI처럼 접었다 펼치는 화면을 만들 때 자주 사용됩니다.

1. slide 효과란?

slide 효과는 요소의 높이를 조절해서 위아래로 펼쳐지거나 접히는 것처럼 보이게 만드는 jQuery 효과입니다.

slideDown() : 숨겨진 요소를 아래로 펼치며 보여줍니다.
slideUp() : 보이는 요소를 위로 접으며 숨깁니다.
slideToggle() : 보이면 접고, 숨겨져 있으면 펼칩니다.

fade 효과가 투명도를 바꾸는 느낌이라면, slide 효과는 높이가 접히고 펼쳐지는 느낌입니다.

2. slideUp()으로 요소 접기

slideUp()은 현재 보이는 요소를 위로 접으면서 숨길 때 사용합니다.

📌 기본 문법

$("선택자").slideUp();

📌 예제 코드

<div id="box" style="width:250px; padding:20px; background:#eeeeee;">
  이 박스는 위로 접히면서 사라집니다.
</div>

<br>

<button id="upBtn">접기</button>

<script>
  $("#upBtn").click(function() {
    $("#box").slideUp();
  });
</script>

📌 실행 결과

처음에는 박스가 화면에 표시됩니다.
접기 버튼을 클릭합니다.
박스가 위로 접히면서 사라집니다.

3. slideDown()으로 요소 펼치기

slideDown()은 숨겨진 요소를 아래로 펼치면서 보여줄 때 사용합니다.

📌 기본 문법

$("선택자").slideDown();

📌 예제 코드

<div id="box" style="display:none; width:250px; padding:20px; background:#e8f3ff;">
  숨겨져 있던 박스가 아래로 펼쳐집니다.
</div>

<br>

<button id="downBtn">펼치기</button>

<script>
  $("#downBtn").click(function() {
    $("#box").slideDown();
  });
</script>

📌 실행 결과

처음에는 박스가 보이지 않습니다.
펼치기 버튼을 클릭합니다.
숨겨져 있던 박스가 아래로 펼쳐지며 나타납니다.

4. slideDown()과 slideUp() 함께 사용하기

펼치기 버튼과 접기 버튼을 따로 만들어서 요소의 표시 상태를 제어할 수 있습니다.

📌 예제 코드

<div id="panel" style="display:none; width:260px; padding:20px; background:#f7f7f7; border:1px solid #dddddd;">
  버튼으로 펼치고 접을 수 있는 패널입니다.
</div>

<br>

<button id="openBtn">펼치기</button>
<button id="closeBtn">접기</button>

<script>
  $("#openBtn").click(function() {
    $("#panel").slideDown();
  });

  $("#closeBtn").click(function() {
    $("#panel").slideUp();
  });
</script>

📌 실행 결과

펼치기 버튼을 클릭하면 패널이 아래로 펼쳐집니다.
접기 버튼을 클릭하면 패널이 위로 접히면서 사라집니다.

5. slideToggle()이란?

slideToggle()은 요소가 보이면 slideUp()처럼 접고, 숨겨져 있으면 slideDown()처럼 펼치는 메서드입니다.

하나의 버튼으로 열기와 닫기를 모두 처리하고 싶을 때 사용하면 편리합니다.

📌 기본 문법

$("선택자").slideToggle();

6. slideToggle() 기본 예제

버튼을 클릭할 때마다 설명 박스가 접히거나 펼쳐지는 예제를 만들어보겠습니다.

📌 예제 코드

<button id="toggleBtn">설명 열기 / 닫기</button>

<div id="infoBox" style="display:none; margin-top:10px; padding:20px; background:#eeeeee;">
  이 설명 박스는 버튼을 누를 때마다 펼쳐지거나 접힙니다.
</div>

<script>
  $("#toggleBtn").click(function() {
    $("#infoBox").slideToggle();
  });
</script>

📌 실행 결과

처음에는 설명 박스가 보이지 않습니다.
버튼을 한 번 클릭하면 설명 박스가 펼쳐집니다.
버튼을 다시 클릭하면 설명 박스가 접힙니다.

7. 속도 지정하기

slideDown(), slideUp(), slideToggle()에는 속도를 지정할 수 있습니다.

숫자를 넣으면 해당 시간 동안 애니메이션이 실행됩니다. 단위는 밀리초입니다.

📌 예제 코드

$("#box").slideDown(500);
$("#box").slideUp(1000);
$("#box").slideToggle(300);

300 : 0.3초 동안 실행됩니다.
500 : 0.5초 동안 실행됩니다.
1000 : 1초 동안 실행됩니다.

숫자 대신 "slow", "fast"도 사용할 수 있습니다.

$("#box").slideDown("slow");
$("#box").slideUp("fast");

8. FAQ 형태 만들기

slideToggle()은 FAQ처럼 질문을 클릭하면 답변이 열리고 닫히는 구조를 만들 때 많이 사용합니다.

📌 예제 코드

<div class="question" style="padding:12px; background:#eeeeee; cursor:pointer;">
  Q. jQuery slide 효과는 언제 사용하나요?
</div>

<div class="answer" style="display:none; padding:12px; border:1px solid #dddddd;">
  A. 메뉴, FAQ, 설명 박스처럼 접고 펼치는 화면을 만들 때 사용합니다.
</div>

<script>
  $(".question").click(function() {
    $(".answer").slideToggle(300);
  });
</script>

📌 실행 결과

처음에는 답변이 보이지 않습니다.
질문 영역을 클릭하면 답변이 펼쳐집니다.
다시 클릭하면 답변이 접힙니다.

9. 여러 FAQ 중 클릭한 답변만 열기

FAQ가 여러 개 있을 때 모든 답변이 한 번에 열리면 불편할 수 있습니다.

클릭한 질문 바로 다음에 있는 답변만 열고 닫고 싶다면 $(this)와 next()를 함께 사용합니다.

📌 예제 코드

<div class="question" style="padding:12px; background:#eeeeee; cursor:pointer;">
  Q. slideDown()은 무엇인가요?
</div>
<div class="answer" style="display:none; padding:12px; border:1px solid #dddddd;">
  A. 숨겨진 요소를 아래로 펼치며 보여주는 메서드입니다.
</div>

<div class="question" style="padding:12px; background:#eeeeee; cursor:pointer;">
  Q. slideUp()은 무엇인가요?
</div>
<div class="answer" style="display:none; padding:12px; border:1px solid #dddddd;">
  A. 보이는 요소를 위로 접으며 숨기는 메서드입니다.
</div>

<script>
  $(".question").click(function() {
    $(this).next(".answer").slideToggle(300);
  });
</script>

📌 실행 결과

첫 번째 질문을 클릭하면 첫 번째 답변만 열립니다.
두 번째 질문을 클릭하면 두 번째 답변만 열립니다.
클릭한 질문과 연결된 답변만 제어됩니다.

10. 하나만 열리는 아코디언 만들기

FAQ에서 여러 답변이 동시에 열리는 것이 아니라, 항상 하나의 답변만 열리게 만들 수도 있습니다.

이럴 때는 먼저 모든 답변을 접고, 클릭한 질문의 답변만 펼치면 됩니다.

📌 예제 코드

<div class="question" style="padding:12px; background:#eeeeee; cursor:pointer;">
  Q. 첫 번째 질문입니다.
</div>
<div class="answer" style="display:none; padding:12px; border:1px solid #dddddd;">
  첫 번째 답변입니다.
</div>

<div class="question" style="padding:12px; background:#eeeeee; cursor:pointer;">
  Q. 두 번째 질문입니다.
</div>
<div class="answer" style="display:none; padding:12px; border:1px solid #dddddd;">
  두 번째 답변입니다.
</div>

<script>
  $(".question").click(function() {
    $(".answer").slideUp(300);
    $(this).next(".answer").slideDown(300);
  });
</script>

📌 실행 결과

첫 번째 질문을 클릭하면 첫 번째 답변이 열립니다.
두 번째 질문을 클릭하면 첫 번째 답변은 닫히고 두 번째 답변이 열립니다.
항상 하나의 답변만 열린 상태가 됩니다.

11. 버튼 글자 함께 바꾸기

slideToggle()을 사용할 때 버튼 문구도 함께 바꾸면 현재 상태를 더 쉽게 알 수 있습니다.

애니메이션이 끝난 뒤 상태를 확인하려면 callback 함수를 사용할 수 있습니다.

📌 예제 코드

<button id="toggleBtn">설명 보기</button>

<div id="infoBox" style="display:none; margin-top:10px; padding:15px; background:#eeeeee;">
  열고 닫을 수 있는 설명 박스입니다.
</div>

<script>
  $("#toggleBtn").click(function() {
    $("#infoBox").slideToggle(300, function() {
      if ($("#infoBox").is(":visible")) {
        $("#toggleBtn").text("설명 닫기");
      } else {
        $("#toggleBtn").text("설명 보기");
      }
    });
  });
</script>

📌 실행 결과

설명 보기 버튼을 클릭하면 설명 박스가 열립니다.
박스가 열린 뒤 버튼 문구가 "설명 닫기"로 변경됩니다.
다시 클릭하면 박스가 닫히고 버튼 문구가 "설명 보기"로 돌아옵니다.

12. 빠르게 여러 번 클릭할 때 stop() 사용하기

slide 애니메이션 중 버튼을 여러 번 빠르게 클릭하면 애니메이션이 밀려서 어색하게 동작할 수 있습니다.

이럴 때는 stop()을 함께 사용해서 이전 애니메이션을 멈춘 뒤 새 동작을 실행할 수 있습니다.

📌 예제 코드

$("#toggleBtn").click(function() {
  $("#infoBox").stop().slideToggle(300);
});

버튼을 빠르게 여러 번 눌러도 애니메이션이 과하게 쌓이는 문제를 줄일 수 있습니다.

13. 전체 예제

이번에는 slideDown(), slideUp(), slideToggle()을 모두 사용한 전체 예제를 만들어보겠습니다.

📌 예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery slide 효과</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>
    #panel {
      display: none;
      width: 280px;
      padding: 20px;
      background: royalblue;
      color: white;
      border-radius: 8px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

  <h2>jQuery slide 효과 공부</h2>

  <div id="panel">
    slide 효과가 적용될 패널입니다.
  </div>

  <button id="downBtn">slideDown</button>
  <button id="upBtn">slideUp</button>
  <button id="toggleBtn">slideToggle</button>

  <script>
    $(function() {
      $("#downBtn").click(function() {
        $("#panel").stop().slideDown(300);
      });

      $("#upBtn").click(function() {
        $("#panel").stop().slideUp(300);
      });

      $("#toggleBtn").click(function() {
        $("#panel").stop().slideToggle(300);
      });
    });
  </script>

</body>
</html>

📌 실행 결과

처음에는 패널이 보이지 않습니다.
slideDown 버튼을 클릭하면 패널이 아래로 펼쳐집니다.
slideUp 버튼을 클릭하면 패널이 위로 접힙니다.
slideToggle 버튼을 클릭하면 패널이 열리거나 닫힙니다.

14. 자주 하는 실수

📌 1. 처음부터 숨겨야 하는 요소에 display:none을 안 쓰는 경우

slideDown()은 숨겨진 요소를 펼치면서 보여주는 메서드입니다.

처음에는 보이지 않다가 버튼을 눌렀을 때 펼쳐지게 하려면 display:none을 적용해야 합니다.

<div id="panel" style="display:none;">
  처음에는 숨겨진 패널입니다.
</div>

📌 2. slideToggle()과 toggleClass()를 헷갈리는 경우

slideToggle()은 요소를 접고 펼치는 메서드입니다.

toggleClass()는 클래스를 추가하거나 제거하는 메서드입니다.

// 접기 / 펼치기
$("#box").slideToggle();

// 클래스 추가 / 제거
$("#box").toggleClass("active");

📌 3. 여러 답변이 전부 같이 열리는 경우

같은 class를 가진 요소를 바로 선택하면 모든 요소가 한 번에 열릴 수 있습니다.

// 모든 answer가 열릴 수 있음
$(".answer").slideToggle();

클릭한 질문과 연결된 답변만 열고 싶다면 다음처럼 작성합니다.

$(this).next(".answer").slideToggle();

📌 4. 빠른 클릭으로 애니메이션이 쌓이는 경우

버튼을 빠르게 여러 번 누르면 애니메이션이 계속 쌓여서 늦게 반응하는 것처럼 보일 수 있습니다.

이럴 때는 stop()을 함께 사용하면 좋습니다.

$("#box").stop().slideToggle(300);

📌 5. jQuery 연결을 빼먹는 경우

slideDown(), slideUp(), slideToggle()도 jQuery 메서드이므로 jQuery 라이브러리를 먼저 연결해야 합니다.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

15. 핵심 정리

slideDown()은 숨겨진 요소를 아래로 펼쳐서 보여줍니다.
slideUp()은 보이는 요소를 위로 접어서 숨깁니다.
slideToggle()은 보이면 접고, 숨겨져 있으면 펼칩니다.
slideDown(300)처럼 숫자를 넣으면 속도를 지정할 수 있습니다.
FAQ나 메뉴처럼 접고 펼치는 화면에 자주 사용됩니다.
여러 요소 중 클릭한 것만 제어할 때는 $(this)와 next()를 함께 사용할 수 있습니다.
빠른 클릭으로 애니메이션이 쌓이면 stop()을 함께 사용하면 좋습니다.

이번 글에서는 jQuery의 slideDown(), slideUp(), slideToggle() 사용법에 대해 알아봤습니다.

slide 효과는 FAQ, 메뉴, 안내 박스처럼 접었다 펼치는 화면을 만들 때 매우 유용합니다.

다음 글에서는 [jQuery] 12. append(), prepend() 사용법에 대해 알아보겠습니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 13. before(), after() 사용법 (0)	2026.06.22
[jQuery] 12. append(), prepend() 사용법 (1)	2026.06.21
[jQuery] 10. fadeIn(), fadeOut(), fadeToggle() 사용법 (0)	2026.06.20
[jQuery] 09. show(), hide(), toggle() 사용법 (0)	2026.06.20
[jQuery] 08. addClass(), removeClass(), toggleClass() 사용법 (0)	2026.06.20