[2] JavaScript & JQuery - show(), hide()

[ 환경 ]
ㄴ JQuery 1.11.1

 

Q. 버튼 클릭 시 사라지게 하고싶습니다. / 버튼 클릭시 나타나게 하고싶습니다.

※ show() - css display:block으로 바꿈 ( 안보이던 영역을 보이게 )

※ hide() - css display:none으로 바꿈 ( 보이던 영역을 안보이게 )

---

1. html 파일 확인

ㄴ button마다 class를 주고 click이벤트로 show, hide 진행

 

2. JQuery 코드 작성

	$(function(){
		// show() 활용
		$(".show").click(function(){
			$(".display").show(); // display button이 보이도록
		})

		// hide() 활용
		$(".hide").click(function(){
			$(".moonddev").hide(); // moonddev button이 안보이도록
		})
	})

ㄴ 작성 완료

 

3. 사이트 확인

ㄴ Q. 버튼 클릭 시 사라지게 하고싶습니다. / 버튼 클릭시 나타나게 하고싶습니다.

ㄴ 기능 정상 작동완료