jQuery의 slideToggle 메서드

다음 메서드인 slideToggle은 요소가 숨겨져 있으면 보여주고, 보여지고 있으면 숨깁니다. 이 메서드의 편리함은 이전 레슨들에서처럼 두 개의 버튼이 아닌 한 개의 버튼에 모든 기능을 걸 수 있다는 점입니다.

다음 예제를 살펴보겠습니다. HTML 코드가 다음과 같다고 가정해 봅시다:

html<button id="toggle">click me</button>
<div id="elem">text...</div>

CSS도 있습니다:

css#elem {
  padding: 10px;
  width: 150px;
  height: 150px;
  border: 1px solid green;
  margin-top: 10px;
}

이제 한 버튼을 클릭할 때마다 요소가 숨겨졌다 보여지도록 하는 코드를 작성해 보겠습니다:

javascript$('#toggle').click(function() {
  $('#elem').slideToggle(1000);
});