접었다 폈다 하는 기능을 만드는 건 귀찮은 일을 수반한다.
하나쯤 만드는 건 간편하다. jQuery에는 slideToggle 이라는 강력한 메서드가 있다.
그런데 여러 개를 만들다 보면 좀 귀찮다. 코드가 반복된다.
그래서 간단하게, 버튼을 만들고, 거기다 타겟 이름을 적어 주면, 타겟을 접었다 폈다 하게 만드는 그런 이벤트 핸들러를 만들었다.
이렇게 하는 데 기본 아이디어는 코드 신택스 하이라이트에서 얻었다.
함수는 아래와 같다.
function bindToggleToToggleClass(){
$('[class*="toggle:"]').each(function(){
var className = $(this).attr('class');
classArray = className.split(' ');
var toggleTarget;
for( i = 0 ; i < classArray.length ; i++){
if(classArray[i].indexOf('toggle:') != -1){
toggleTarget = classArray[i].replace(/toggle:/,'');
}
}
$(this).css({
'cursor': 'pointer'
}).click(function(){
$(toggleTarget).slideToggle();
});
$(toggleTarget).hide();
})
}
그리고 html 쪽에서는 이렇게 써 주면 된다.
<input type="button" value="열기" class="toggle:#targetId"/> <div style="padding:20px;border:1px solid #ddd" id="targetId"> 여기는 타겟 아이디입니다. </div>
그러면 아래처럼 된다. 예제에서는 id를 사용했지만, class를 사용할 수도 있다. toggle:.targetClass 이런 형식으로 적으면 된다.
여기는 타겟 아이디입니다.
댓글 남기기