제이쿼리 요소 표시/숨김 메소드 정리

제이쿼리의 .hide(), .show(), .toggle() 메소드로 요소를 간편하게 숨기고 표시하는 방법

---

요소를 숨기거나 나타내는 메소드

제이쿼리는 DOM 요소의 표시 상태를 동적으로 제어할 수 있는 간단한 메소드를 제공합니다.

1. .hide() – 요소 숨기기

$("#hideBtn").on("click", function() {
  $("#text").hide(); // display: none 상태로 숨김
});

• CSS에서 display: none과 동일한 효과
• 레이아웃에서 완전히 사라짐

---

2. .show() – 요소 표시하기

$("#showBtn").on("click", function() {
  $("#text").show(); // 요소 다시 표시
});

• 숨겨졌던 요소를 다시 표시
• 이전 display 값을 기억해 복원

---

속도 설정 및 애니메이션 효과

.show()와 .hide()에 속도를 지정하면 애니메이션 효과로 부드럽게 전환됩니다.

속도 설정 방법

• 숫자 (밀리초): 1000 → 1초
• 문자열 예약어: "fast"(200ms), "slow"(600ms)

$("#text").hide("fast");
$("#text").show(2000); // 2초에 걸쳐 표시

---

.toggle() – 표시/숨김 상태 전환

$("#toggleBtn").on("click", function() {
  $("#text").toggle("slow"); // 표시 ↔ 숨김 전환
});

• 현재 상태를 자동 감지해 반대 상태로 전환
• 상태 전환 버튼 등에 유용

---

.hide() vs visibility: hidden

방식	요소 보임 여부	공간 차지 여부
.hide() / display: none	❌ 보이지 않음	❌ 공간 차지 안 함
visibility: hidden	❌ 보이지 않음	✅ 공간 차지함

• .hide()는 완전히 제거한 듯한 효과,
• visibility: hidden은 자리는 유지되므로 레이아웃에 영향 있음

---

응용 예제

1. 순차적 표시 (콜백 사용)

$("#showSequential").on("click", function() {
  $("#text1").show("fast", function() {
    $("#text2").show("fast", function() {
      $("#text3").show("fast");
    });
  });
});

• 콜백 함수를 사용해 애니메이션 순서를 제어할 수 있습니다.

2. 인접 요소 토글

$(".toggleBtn").on("click", function() {
  $(this).next(".content").toggle(1000);
});

• 버튼 바로 다음에 있는 .content 요소를 토글
• FAQ 아코디언 메뉴 구현에 자주 사용

---

콜백 함수 활용하기

$("#hideBtn").on("click", function() {
  $("#text").hide(1000, function() {
    alert("요소가 숨겨졌습니다!");
  });
});

• 애니메이션이 끝난 뒤 실행할 동작을 콜백 함수로 지정할 수 있습니다.

---

주요 메소드 요약

• .hide() : 요소를 숨김 (display: none)
• .show() : 숨겨진 요소를 다시 표시
• .toggle() : 표시 ↔ 숨김 전환

---

이벤트 처리 팁

1. 속도 지정으로 자연스러운 전환 구현

   200, "slow", "fast" 등 적절히 사용

2. 콜백 함수 활용

   애니메이션 후 다음 작업을 순서대로 처리 가능

3. 상호작용 UI 만들기

   .toggle()로 아코디언 메뉴, 드롭다운, 탭 등 구현

---

질문 정리

.hide()로 숨긴 요소는 여전히 DOM에 있나요?

→ 네, DOM에 남아 있지만 브라우저에 표시되지 않습니다.

속도를 지정하지 않으면 어떻게 되나요?

→ 즉시 보여지거나 사라지며, 애니메이션 없이 처리됩니다.

.toggle()은 현재 상태를 어떻게 판단하나요?

→ 내부적으로 display 상태를 기준으로 판단해 표시 여부를 전환합니다.

숨김 후 자동으로 다시 표시하고 싶어요.

→ setTimeout() 또는 .delay()와 .show()를 조합하면 가능합니다.