[3] JavaScript & JQuery - toggle()

[ 환경 ]
ㄴ JQuery 1.11.1

Q. 버튼을 클릭했을때 생겼다 사라졌다 컨트롤 하고 싶습니다.

---

1. html 코드

<div>
	<button class="toggle">해당버튼 클릭시 toggle 사라졌다 생겼다 반복.</button>
	<button class="t_box">toggle</button>
</div>

 

2. JQuery 코드 작성

$(function(){
    // toggle() 활용
    $(".toggle").click(function(){
        $(".t_box").toggle(); // toggle버튼 생겼다가 사라졌다가 반복
    })
})

ㄴ toggle() - css display: inline-block; display: none; 을 반복하여 사라졌다 생겼다 효과를 준다.

ㄴ toggle() - show, hide의 효과를 동시에 사용할 수 있다.

- 만약 show,hide로 toggle과 같은 효과를 내려면 코드가 많이 늘어나게 된다.

- 클래스값을 계속 변경해줘야하며, show,hide를 각각의 클래스에 넣어주는 등 여러줄의 코드가 더 작성이 되어야한다. 

 

3. 사이트(기능) 확인

 

ㄴ Q. 버튼을 클릭했을때 생겼다 사라졌다 컨트롤 하고 싶습니다.

- 원하는 기능 작동완료

 

 

※. 반대로 사라진상태에서 나타나도록 하고싶을땐?
ㄴ toggle버튼에 display:none을 줘서 가린상태에서 toggle()을 사용하면됨.