[jQuery] 요소의 표시와 숨김 - show() / hide() / toggle()

jQuery 요소의 표시와 숨김

jQuery의 show(), hide(), toggle() 함수를 사용해, 선택한 요소를 숨기고, 보여줍니다.

간단하게 이야기하면 요소의 상태값을 display:block, display:none 처리해주는 효과입니다.

 

.show()

선택한 요소를 보여줍니다.

정의

• .show()는 선택한 요소를 보여줍니다.
• .show("시간")은 선택한 요소를 해당하는 시간동안 보여줍니다.
• 시간은 초 단위로 설정합니다. (숫자로 표현)
• 시간은 문자(slow, fast)로도 표현 할 수 있습니다.

 

문법

$("선택자").show();
$("선택자").show("시간");
$("선택자").show("시간", 함수);

 

예제

$(".btn1").on("click", function(e){
    $(".list1").show();
});
$(".btn2").on("click", function(e){
    $(".list1").show(2000);
});
$(".btn3").on("click", function(e){
    $(".list1").show("fast");
});

 

---

 

.hide()

선택한 요소를 숨깁니다.

정의

• .hide()는 선택한 요소를 숨김니다.
• .hide("시간")은 선택한 요소를 해당하는 시간동안 숨김니다.
• 시간은 초 단위로 설정합니다. (숫자로 표현)
• 시간은 문자(slow, fast)로도 표현 할 수 있습니다.

 

문법

$("선택자").hide();
$("선택자").hide("시간");
$("선택자").hide("시간", 함수);

 

예제

$(".btn1").on("click", function(e){
    $(".list1").hide();
});
$(".btn2").on("click", function(e){
    $(".list1").hide(400);
});
$(".btn3").on("click", function(e){
    $(".list1").hide("slow");
});

 

---

 

.toggle()

선택한 요소를 선택한 요소를 숨기거나, 보여줍니다.

정의

• .toggle()은 선택한 요소를 숨기거나, 보여줍니다.
• .toggle("시간") 메서드는 선택한 요소를 설정한 시간동안 숨기고/보여줍니다.
• 시간은 초 단위로 설정합니다. (숫자로 표현)
• 시간은 문자(slow, fast)로도 표현 할 수 있습니다.

 

문법

$("선택자").toggle();
$("선택자").toggle("시간");
$("선택자").toggle("시간", 함수);

 

예제

$(".btn1").on("click", function(e){
    $(".list1").toggle();
});
$(".btn2").on("click", function(e){
    $(".list1").toggle(2000);
});
$(".btn3").on("click", function(e){
    $(".list1").toggle("fast");
});