jquery.peekaboo.js

jquery.peekaboo.js

(function($) {
	$.fn.peekaboo = function(options) {
		if (this.length === 0) { return false; }
		
		// user option
		var conf = $.extend({
			duration: 400,
			activeClass: 'active'
		}, options);
		
		this.each(function() {
			
			var self = $(this);
			var target = self.find('.js-peekabooTarget');
			var trigger = self.find('.js-peekabooTrigger');
			var closeTrigger = self.find('.js-peekabooCloseTrigger');
			var close = function(e) {
				e.preventDefault();
				self.removeClass(conf.activeClass);
				target.stop().fadeOut(conf.duration);
			};
			
			// init
			target.hide();
			
			// event bind
			trigger.on('click', function(e) {
				e.preventDefault();
				self.toggleClass(conf.activeClass);
				target.stop().fadeToggle(conf.duration);
			});
			closeTrigger.on('click', function(e) {
				close(e);
			});
			
			$(document).on('click', function(e) {
				if ( !$.contains(self[0], e.target) && self.hasClass(conf.activeClass) ) {
					close(e);
				}
			});
			
		});
		
		return this;
	};
})(jQuery);