jQuery의 slideToggle 메서드

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

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

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

CSS도 있습니다:

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

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

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