본문 바로가기
Jquery, Javascript

[Jquery] hide(),show(),toggle()

by 준오네 2022. 4. 26.
반응형

안녕하세요 기본적이지만 자주쓰이는 제이쿼리문인 hide,show,toggle입니다.

 

hide : 숨기기

show : 보이기

toggle : 숨기기/보이기

 

버튼 클릭시 동작이 되도록 코딩했습니다.

<p>문구입니다.</p>

<div><button>클릭하세요</button></div>
<script>
	$(document).ready(function(){
	  $("button").click(function(){
		$("p").hide();
	  });
	});
</script>

 

클릭하세요 버튼을 클릭했을시, p태그 문구입니다를 hide()하면서 숨겨줍니다.

 

<script>
	$(document).ready(function(){
	  $("button").click(function(){
		$("p").show();
	  });
	});
</script>

이건 클릭하세요 버튼을 클릭시에 보여줍니다. hide 되거나 css에서 display:none 되어있는 부분을

보여지게 합니다.

 

toggle도 동일하게 사용하며, 클릭시 보여질때 숨겨지고, 숨겨졌을때 보여지게 해줍니다.

반응형

댓글