[jQuery] 09. show(), hide(), toggle() 사용법

지난 글에서는 jQuery의 addClass(), removeClass(), toggleClass()를 사용해서 CSS 클래스를 제어하는 방법을 알아봤습니다.

이번 글에서는 HTML 요소를 화면에 보이게 하거나 숨길 때 사용하는 show(), hide(), toggle()에 대해 알아보겠습니다.

이 메서드들은 버튼을 눌렀을 때 설명 박스를 열고 닫거나, 안내 문구를 숨기거나, 메뉴를 펼치고 접는 기능을 만들 때 자주 사용됩니다.

1. show(), hide(), toggle()이란?

jQuery에서는 요소의 표시 상태를 간단하게 제어할 수 있습니다.

show() : 숨겨진 요소를 화면에 보여줍니다.
hide() : 보이는 요소를 화면에서 숨깁니다.
toggle() : 보이면 숨기고, 숨겨져 있으면 보여줍니다.

즉, show()와 hide()는 각각 보여주기와 숨기기이고, toggle()은 두 동작을 번갈아 실행하는 메서드입니다.

2. hide()로 요소 숨기기

hide()는 선택한 요소를 화면에서 숨길 때 사용합니다.

📌 기본 문법

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

📌 예제 코드

<p id="message">이 문장은 버튼을 누르면 사라집니다.</p>

<button id="hideBtn">숨기기</button>

<script>
  $("#hideBtn").click(function() {
    $("#message").hide();
  });
</script>

📌 실행 결과

처음에는 문장이 화면에 표시됩니다.
숨기기 버튼을 클릭합니다.
문장이 화면에서 사라집니다.

3. show()로 요소 보이기

show()는 숨겨져 있는 요소를 다시 화면에 보여줄 때 사용합니다.

📌 기본 문법

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

📌 예제 코드

<p id="message" style="display:none;">숨겨져 있던 문장입니다.</p>

<button id="showBtn">보이기</button>

<script>
  $("#showBtn").click(function() {
    $("#message").show();
  });
</script>

📌 실행 결과

처음에는 문장이 보이지 않습니다.
보이기 버튼을 클릭합니다.
숨겨져 있던 문장이 화면에 나타납니다.

4. show()와 hide() 함께 사용하기

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

📌 예제 코드

<div id="box" style="width:220px; padding:20px; background:#eeeeee;">
  보였다가 숨겨지는 박스입니다.
</div>

<br>

<button id="showBtn">보이기</button>
<button id="hideBtn">숨기기</button>

<script>
  $("#showBtn").click(function() {
    $("#box").show();
  });

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

📌 실행 결과

숨기기 버튼을 클릭하면 박스가 사라집니다.
보이기 버튼을 클릭하면 박스가 다시 나타납니다.

5. toggle()이란?

toggle()은 요소가 보이면 숨기고, 숨겨져 있으면 다시 보여주는 메서드입니다.

show()와 hide()를 버튼 하나로 처리하고 싶을 때 사용하면 편리합니다.

📌 기본 문법

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

6. toggle() 기본 예제

버튼을 클릭할 때마다 문장이 보였다가 사라지는 예제를 만들어보겠습니다.

📌 예제 코드

<p id="message">버튼을 누를 때마다 보이거나 숨겨집니다.</p>

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

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

📌 실행 결과

처음에는 문장이 화면에 보입니다.
버튼을 한 번 클릭하면 문장이 사라집니다.
버튼을 다시 클릭하면 문장이 다시 나타납니다.

7. 속도를 넣어 부드럽게 처리하기

show(), hide(), toggle()에는 속도를 넣을 수 있습니다.

숫자를 넣으면 해당 시간 동안 천천히 동작합니다. 단위는 밀리초입니다.

📌 예제 코드

<div id="box" style="width:220px; padding:20px; background:skyblue;">
  천천히 사라지는 박스입니다.
</div>

<br>

<button id="toggleBtn">토글</button>

<script>
  $("#toggleBtn").click(function() {
    $("#box").toggle(500);
  });
</script>

📌 실행 결과

버튼을 클릭하면 박스가 0.5초 동안 천천히 사라집니다.
다시 클릭하면 0.5초 동안 천천히 나타납니다.

참고로 1000은 1초, 500은 0.5초를 의미합니다.

8. slow, fast 사용하기

숫자 대신 "slow", "fast" 같은 문자열을 사용할 수도 있습니다.

📌 예제 코드

$("#box").hide("slow");
$("#box").show("fast");
$("#box").toggle("slow");

정확한 속도를 조절하고 싶다면 숫자를 사용하는 것이 더 명확합니다.

9. 안내 문구 열고 닫기 예제

toggle()은 안내 문구나 설명 박스를 열고 닫는 기능에 자주 사용됩니다.

📌 예제 코드

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

<div id="infoBox" style="display:none; margin-top:10px; padding:15px; background:#f7f7f7; border:1px solid #dddddd;">
  이 영역은 버튼을 클릭하면 열리고 다시 클릭하면 닫힙니다.
</div>

<script>
  $("#infoBtn").click(function() {
    $("#infoBox").toggle(300);
  });
</script>

📌 실행 결과

처음에는 설명 박스가 보이지 않습니다.
설명 보기 버튼을 클릭하면 설명 박스가 나타납니다.
버튼을 다시 클릭하면 설명 박스가 사라집니다.

10. 버튼 글자도 함께 바꾸기

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

이때는 is(":visible")을 사용해서 요소가 현재 보이는 상태인지 확인할 수 있습니다.

📌 예제 코드

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

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

<script>
  $("#infoBtn").click(function() {
    $("#infoBox").toggle(300);

    if ($("#infoBox").is(":visible")) {
      $("#infoBtn").text("설명 닫기");
    } else {
      $("#infoBtn").text("설명 보기");
    }
  });
</script>

다만 toggle(300)은 애니메이션이 진행되는 동안 상태 판단이 헷갈릴 수 있습니다. 그래서 정확하게 처리하려면 toggle이 끝난 뒤 실행되는 callback을 사용할 수 있습니다.

📌 callback 사용 예

$("#infoBox").toggle(300, function() {
  if ($("#infoBox").is(":visible")) {
    $("#infoBtn").text("설명 닫기");
  } else {
    $("#infoBtn").text("설명 보기");
  }
});

11. 여러 박스 중 클릭한 것만 열기

여러 개의 버튼과 박스가 있을 때 클릭한 버튼과 관련된 박스만 열고 닫고 싶다면 구조를 잘 잡아야 합니다.

간단한 예제로 버튼 바로 다음에 있는 박스를 열고 닫아보겠습니다.

📌 예제 코드

<button class="question">질문 1</button>
<div class="answer" style="display:none; padding:10px; background:#eeeeee;">
  질문 1의 답변입니다.
</div>

<button class="question">질문 2</button>
<div class="answer" style="display:none; padding:10px; background:#eeeeee;">
  질문 2의 답변입니다.
</div>

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

📌 실행 결과

질문 1을 클릭하면 질문 1의 답변만 열립니다.
질문 2를 클릭하면 질문 2의 답변만 열립니다.
클릭한 버튼 바로 다음에 있는 answer만 제어됩니다.

12. 전체 예제

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

📌 예제 코드

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

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

  <h2>jQuery show(), hide(), toggle() 공부</h2>

  <div id="box">
    버튼으로 보이거나 숨겨지는 박스입니다.
  </div>

  <button id="showBtn">보이기</button>
  <button id="hideBtn">숨기기</button>
  <button id="toggleBtn">열기 / 닫기</button>

  <script>
    $(function() {
      $("#showBtn").click(function() {
        $("#box").show(300);
      });

      $("#hideBtn").click(function() {
        $("#box").hide(300);
      });

      $("#toggleBtn").click(function() {
        $("#box").toggle(300);
      });
    });
  </script>

</body>
</html>

📌 실행 결과

보이기 버튼을 클릭하면 박스가 나타납니다.
숨기기 버튼을 클릭하면 박스가 사라집니다.
열기 / 닫기 버튼을 클릭하면 박스가 보였다가 숨겨집니다.
300ms 속도로 부드럽게 동작합니다.

13. 자주 하는 실수

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

처음에는 안 보이다가 버튼을 눌렀을 때 나타나게 하려면 HTML 요소에 display:none을 적용해야 합니다.

<div id="box" style="display:none;">
  처음에는 숨겨진 박스입니다.
</div>

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

toggle()은 요소를 보이거나 숨기는 메서드입니다.

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

// 표시 상태 변경
$("#box").toggle();

// 클래스 변경
$("#box").toggleClass("active");

📌 3. 여러 요소가 모두 같이 열리는 경우

같은 class를 가진 요소를 선택하면 여러 요소가 한 번에 바뀔 수 있습니다.

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

현재 클릭한 요소와 연결된 것만 바꾸고 싶다면 $(this), next(), parent(), find() 등을 함께 사용합니다.

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

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

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

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

14. 핵심 정리

show()는 숨겨진 요소를 화면에 보여줍니다.
hide()는 보이는 요소를 화면에서 숨깁니다.
toggle()은 보이면 숨기고, 숨겨져 있으면 보여줍니다.
show(500), hide(500), toggle(500)처럼 속도를 지정할 수 있습니다.
처음부터 숨길 요소는 display:none을 적용하면 됩니다.
toggle()은 표시 상태를 바꾸고, toggleClass()는 클래스를 바꿉니다.
여러 요소 중 하나만 제어할 때는 $(this)와 next() 같은 탐색 메서드를 함께 사용합니다.

이번 글에서는 jQuery의 show(), hide(), toggle() 사용법에 대해 알아봤습니다.

이 메서드들은 설명 박스, FAQ, 메뉴 열기/닫기처럼 화면 요소를 간단하게 제어할 때 유용합니다.

다음 글에서는 [jQuery] 10. fadeIn(), fadeOut(), fadeToggle() 사용법에 대해 알아보겠습니다.

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

[jQuery] 11. slideDown(), slideUp(), slideToggle() 사용법 (0)	2026.06.20
[jQuery] 10. fadeIn(), fadeOut(), fadeToggle() 사용법 (0)	2026.06.20
[jQuery] 08. addClass(), removeClass(), toggleClass() 사용법 (0)	2026.06.20
[jQuery] 07. attr()와 prop() 사용법 (0)	2026.06.19
[jQuery] 06. css()로 스타일 변경하기 (0)	2026.05.21