[JQuery] HTML요소 숨기기, 나타내기

<div>
  <div class="hideDiv">이걸 어찌 숨길까요?</div>
  <div class="showDiv">이건 계속 나타나있답니다</div>
</div>

이러한 HTML이 있다면 JQuery에서 hideDiv를 숨기려면 어떻게 해야할까요? 그 숨긴걸 다시 나타내려면 어떻게 해야할까요?

 

그 해결책을 아래에서 제시하겠습니다.

메서드를 한번 알아볼까요?

HTML요소 숨기기, 나타내기

show

선택한 요소를 나타냅니다. 이는 CSS의 display: block과 같은 역할을 합니다

$(".hideDiv").show();

hide

선택한 요소를 숨깁니다. 이는 CSS의 display: none 과 같은 역할을 합니다

$(".hideDiv").hide();

toggle

선택한 요소가 display: none이라면 block으로 바꾸고 display: block이라면 none으로 만듭니다.

$(".hideDiv").toggle();

 

간단하죠? 그런데 여기에는 엄청난 기능이 숨어있습니다

 

나타낼때 서서히 나타나거나 서서히 사라지게 만들 수 있습니다!

 

1000은 1초 입니다! 2000은 2초겠죠?

 

이팩트 - 서서히 숨기기, 서서히 나타내기

show

$(".hideDiv").show(1000);
$(".hideDiv").show('fast');
$(".hideDiv").show('slow');

hide

$(".hideDiv").hide(1000);
$(".hideDiv").hide('fast');
$(".hideDiv").hide('slow');

toggle

$(".hideDiv").toggle(1000);
$(".hideDiv").toggle('fast');
$(".hideDiv").toggle('slow');