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

데모페이지
http://codepen.io/redgoose/pen/rJEtL

플러그인 js

// 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);

(($target.length) ? $target : $this).toggleClass(op.activeClassName);

});

}

호출부분 js

jQuery(function($){

$('#toggle').toggleElement({

toggleButtonElement : '> h1' // 토글 엘리먼트(내부 엘리먼트)

//,targetElement : '> form' // 클래스이름이 붙는 엘리먼트 (내부 엘리먼트)

,activeClassName : 'on' // 토글 클래스명

});

});

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