Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

toggle:selector 형태로 토글 이벤트 할당하는 함수

접었다 폈다 하는 기능을 만드는 건 귀찮은 일을 수반한다.

하나쯤 만드는 건 간편하다. 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 이런 형식으로 적으면 된다.


여기는 타겟 아이디입니다.


안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다