[jQuery] Content toggle (내용 클래스 토글링 플러그인)

특정 엘리먼트를 클릭하면 클래스가 토글되면서 css에 따라 다른 이벤트를 발생시킬 수 있다.
자세한 기능은 데모페이지를 통해서 확인가능

데모페이지

http://codepen.io/redgoose/pen/rJEtL

플러그인 소스

// toggle element plugin
jQuery.fn.toggleElement = function(options)
{
	var
		$this = $(this),
		defaults = {
			toggleButtonElement : null,
			targetElement : null,
			activeClassName : 'active'
		}
		,op = $.extend(defaults, options)
		,$button = $this.find(op.toggleButtonElement)
	;
	// onclick event handler
	$button.on('click', function(){
		var $target = $this.find(op.targetElement);
		if ($target.length)
		{
			$target.toggleClass(op.activeClassName);
		}
		else
		{
			$this.toggleClass(op.activeClassName);
		}
	});
}

플러그인 호출

$('#search').toggleElement({
	toggleButtonElement : '> h1'
	//,targetElement : '> form'
	,activeClassName : 'on'
});

위의 소스는 단순히 클래스이름만 토글링한다. 자세한 전체 소스는 데모페이지를 통해서 확인하길 바란다.