[Jquery] show(), hide() - 요소 표시하거나 숨기는 방법

   

 

hide() 메소드   - 선택한 요소를 순간적으로 사라지게 합니다.

show() 메소드 - 선택한 요소를 나타나게 합니다.

 

.hide() 메소드를 통해 숨겨진 요소는 CSS의 속성값이 none으로 설정됩니다.

그래서, 요소가 보이지 않게 됩니다.

 

아래 예제를 통하여 자세히 살펴보도록 하겠습니다.

<script>
    $(function() {
        $("#showBtn").on("click", function() {
            $("#text").show();
        })
        $("#hideBtn").on("click", function() {
            $("#text").hide();
        })
    })
</script>

<h1>요소의 표시와 숨김</h1>
<button id="showBtn">요소 표시하기!</button>
<button id="hideBtn">요소 숨기기!</button>
<p>CSS의 display 속성값이 none으로 설정되기 때문에 웹 페이지의 레이아웃에서 아예 사라져 버려요!</p>
<p id="text">이 단락을 숨기거나 나타나게 할 거에요!</p>

 

출력 결과

 

'showBtn' 이라는 id를 가진 button을 클릭하면 'text'라는 id를 가진 <p> 태그가 보여지고,

'hideBtn' 이라는 id를 가진 button을 클릭하면 'text'라는 id를 가진 <p> 태그가 숨겨지는 예제입니다.

 

---

여기서 추가로 요소를 표시하거나 숨길 때, 

빠르게 하거나 혹은 느리게 혹은 시간을 지정하여 설정할 수 있습니다.

 

show()와 hide() 메소드의 인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 키워드를 전달하면

이펙트 효과의 속도 조절이 가능합니다.

 

아래 예제 코드 처럼 show()인수에 밀리초를 제시하면 됩니다.

<script>
    $(function() {
        $("#showBtn").on("click", function() {
            $("#text").show(2000);
        })
        $("#hideBtn").on("click", function() {
            $("#text").hide();
        })
    })
</script>

<h1>요소의 표시와 숨김 속도 조절</h1>
<button id="showBtn">요소 표시하기!</button>
<button id="hideBtn">요소 숨기기!</button>
<p id="text">이 단락을 숨기거나 나타나게 할 거에요!</p>

 

---

그리고 show() 메소드와 hide() 메소드를 교대로 동작하는 toggle() 메소드가 있습니다.

 

toggle() 메소드

선택한 요소가 현재 hide() 상태라면  show() 메소드의 동작을 수행하고, show() 상태라면 hide() 메소드의 동작을 수행합니다.

 

아래 예제처럼 사용하시면 됩니다.

<script>
    $(function() {
        $("#toggleBtn").on("click", function() {
            $("#text").toggle("show");
        })
    })
</script>