쯔이's Dev

jQuery의 .hide(), .show(), .toggle() 본문

카테고리 없음

jQuery의 .hide(), .show(), .toggle()

jjhim531 2025. 1. 13. 19:44
반응형

1. .hide()

  • 역할: 선택한 요소를 숨깁니다.
  • 작동 방식:
    • CSS의 display: none; 속성을 설정하여 요소를 화면에서 보이지 않게 합니다.
    • DOM에는 여전히 존재하지만, 사용자에게는 보이지 않습니다.

예제:

$("#box").hide(); // #box 요소를 숨김
  • 실행 결과:
    • 해당 요소가 화면에서 사라짐.
    • 요소는 DOM에 남아 있으며, 크기와 공간을 차지하지 않음.

 

2. .show()

  • 역할: 숨겨진 요소를 다시 표시합니다.
  • 작동 방식:
    • 숨겨져 있던 요소(display: none;)를 화면에 다시 표시합니다.
    • 숨겨지기 전의 상태로 복원합니다.

예제:

$("#box").show(); // #box 요소를 표시
  • 실행 결과:
    • 숨겨진 요소가 화면에 나타남.
    • 이전에 설정된 CSS 속성(예: block, inline)에 따라 표시.

3. .toggle()

  • 역할: 요소가 숨겨져 있으면 표시하고, 표시되어 있으면 숨깁니다.
  • 작동 방식:
    • .hide()와 .show()를 자동으로 전환.
    • 요소가 현재 보이는 상태인지 숨겨진 상태인지에 따라 작동.

예제 1 :

$("#box").toggle(); // #box 요소 표시/숨김 상태 전환
  • 실행 결과:
    • 처음 호출 시 요소가 보이면 숨기고, 숨겨져 있으면 표시.

예제 2 :

<div id="menu" style="display:none; background: lightgray; padding: 10px;">
    <p>메뉴 항목 1</p>
    <p>메뉴 항목 2</p>
    <p>메뉴 항목 3</p>
</div>
<button id="hamburgerBtn">☰</button>

<script>
    $("#hamburgerBtn").click(function () {
        $("#menu").toggle(); // 햄버거 메뉴 보이기/숨기기 전환
    });
</script>

동작

  1. "☰" 버튼을 클릭하면 메뉴가 나타남.
  2. 다시 클릭하면 메뉴가 숨겨짐.

 

.toggle()의 필요성

  1. "보이기"와 "숨기기"를 번갈아 처리할 때 유용:
    • .hide()와 .show()를 따로 호출하는 대신, 현재 상태에 따라 자동으로 전환합니다.
    • 즉, 요소가 보이면 숨기고, 숨겨져 있으면 보여줍니다.
    • 반복적인 코드를 줄이고 가독성을 높여줍니다.
  2. 상태 기반의 동작을 간소화:
    • 특정 조건(보이는지/숨겨졌는지)을 체크하지 않고, if 문 없이도 보이기/숨기기 처리가 가능합니다.

>> .toggle()이 필요한 상황

1) UI의 토글 동작:

  • 버튼을 클릭할 때 텍스트를 표시하거나 숨기는 기능.
  • 예: "더보기" 버튼 클릭 → 추가 콘텐츠 표시, 다시 클릭 → 숨김.

2) 사이드 메뉴 또는 드롭다운 메뉴:

  • 햄버거 메뉴를 클릭했을 때 메뉴를 보이거나 숨기는 동작.

3) 상태 전환:

  • 상태가 고정된 것이 아니라, 사용자가 원하는 시점에 번갈아가며 보이기/숨기기가 필요한 경우.

>> .toggle() vs if 조건문

 

.toggle() 없이 구현하려면 현재 상태를 수동으로 확인해야 합니다.

조건문을 사용한 코드

if ($("#content").is(":visible")) {
    $("#content").hide(); // 요소가 보이면 숨김
} else {
    $("#content").show(); // 요소가 숨겨져 있으면 보임
}

.toggle()을 사용한 코드 

$("#content").toggle();

 

 

 

차이점 비교

메서드역할동작 조건결과

.hide() 요소를 숨김 요소가 현재 보이는 상태 화면에서 사라지고 DOM에 존재
.show() 숨겨진 요소를 표시 요소가 현재 숨겨진 상태 화면에 나타남
.toggle() 요소 표시/숨김 상태를 전환 표시 여부에 따라 다름 현재 상태에 따라 .hide() 또는 .show() 실행 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery hide/show/toggle</title>
    <script
        src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <button id="hideBtn">Hide</button>
    <button id="showBtn">Show</button>
    <button id="toggleBtn">Toggle</button>
    <div id="box"></div>

    <script>
        $(function () {
            // Hide 버튼 클릭 시 #box 숨김
            $("#hideBtn").click(function () {
                $("#box").hide();
            });

            // Show 버튼 클릭 시 #box 표시
            $("#showBtn").click(function () {
                $("#box").show();
            });

            // Toggle 버튼 클릭 시 #box 표시/숨김 전환
            $("#toggleBtn").click(function () {
                $("#box").toggle();
            });
        });
    </script>
</body>
</html>

코드 실행 결과

  1. Hide 버튼 클릭:
    • 빨간색 박스(div#box)가 숨겨짐.
  2. Show 버튼 클릭:
    • 숨겨진 빨간색 박스가 다시 표시됨.
  3. Toggle 버튼 클릭:
    • 빨간색 박스가 보이면 숨기고, 숨겨져 있으면 다시 표시.

언제 사용하면 좋을까?

  1. .hide():
    • 특정 이벤트(예: 버튼 클릭, 조건 충족) 시 요소를 화면에서 숨길 때 사용.
    • 예: 팝업 닫기 버튼을 눌렀을 때 팝업 숨기기.
  2. .show():
    • 숨겨진 요소를 다시 표시해야 할 때 사용.
    • 예: 폼 유효성 검사 실패 시 에러 메시지 표시.
  3. .toggle():
    • 표시/숨김 상태를 번갈아가며 전환해야 할 때 사용.
    • 예: "자세히 보기" 버튼을 눌렀을 때 콘텐츠 표시/숨김.

추가: 애니메이션과 함께 사용

.hide(), .show(), .toggle()는 애니메이션 효과를 추가할 수도 있습니다.

// 요소를 서서히 숨김 (1초)
$("#box").hide(1000);

// 요소를 서서히 표시 (0.5초)
$("#box").show(500);

// 요소의 표시/숨김을 서서히 전환 (1초)
$("#box").toggle(1000);
728x90
반응형