[jQuery] toggle() - 화면에서 요소를 보였다가 안 보였다가를 반복하는 메소드

제이쿼리를 사용하여 버튼을 클릭하면 특정 요소를 보였다가 다시 클릭하면 보이지 않게 하는 간단한 방법은??

--> toggle() 메소드를 사용하면 된다.

 

toggle()을 사용하면 보였던 요소는 숨겨주고 안 보이던 요소는 화면에 보이게 해준다.

(ex. 버튼을 클릭하면 list가 보였다가 안 보였다가 한다.)

 

문법

$(선택자).([,속도][,콜백함수])

필수 파라메터가 아닌 속도,콜백함수는 각각 효과가 나타나는 속도와 효과가 나타난 후 호출되는 함수를 의미한다.

 

예시))

<ul>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
</ul>

<button>누르면 토글</button>

다음과 같은 화면이 있는 경우

 

아래 코드와 같이 toggle효과 를 적용하면

//button을 클릭했을 때 ul 태그에 toggle효과 적용
$("button").click(function(){
  $("ul").toggle();
});

버튼을 누를 때 마다 다음과 같은 화면이 표시된다.

ul 태그가 화면에 표시된 상태에서 button을 누르면 ul 태그가 사라짐

ul 태그가 화면에 표시되지 않은 상태에서 button을 누르면 ul 태그가 표시됨