[jQuery] 제이쿼리 show / hide

jquery .show()

.show()는 요소의 css가 display:none; 일 때 요소를 display:block;으로 바꿔주는 함수이다. 

 

예시) 아래의 button을 눌러서 숨겨진 요소를 보이게 할 수 있다.

 

<button>요소 보이게 하기</button>

<div id="popup" style="display:none;" >
	<p>팝업입니다.</p>
</div>

$(document).ready(function(){
	$('button').click(function(){
		$('#popup').show();		//요소를 보이게 한다.
	})
})

 

jquery .hide()

.hide()는 요소의 css를 display:none; 으로 바꿔주는 함수이다. 

 

화면에 보이는 요소를 안 보이게 바꿔준다.

 

예시) 아래의 button을 눌러서 요소를 안보이게 할 수 있다.

 

<button>요소 안보이게 하기</button>

<div id="popup" >
	<p>팝업입니다.</p>
</div>

$(document).ready(function(){
	$('button').click(function(){
		$('#popup').hide();		//요소를 안보이게 한다.
	})
})

 

버튼 하나로 ON/OFF처리 하기

 

show()와 hide()로 레이어 팝업을 구현할 수 있다

 

$(document).ready(function(){
	isShow = true; //변수 하나를 설정, 화면에 보이면 true, 보이지 않으면 false;
	$('button').click(function(){
	if(isShow){ //보이니까 숨기고
    		isShow = false;
    		$('#popup').hide();		//요소를 안보이게 한다.
        	$('button').text('on');
    	}else{	//안보이니까 보이게 한다
    		isShow = true;
		$('#popup').show();		//요소를 보이게 한다
        	$('button').text('off');
    	}
	})
})

 

See the Pen [jquery] .show() / .hide() by 윤재현 (@jh91) on CodePen.