jquery.contentToggler.js

jquery.contentToggler.js

(function () {
	
	/* 
		The trigger:
		have the attribute: data-toggle-target= CLASSNAME
		Then you can toggle All you waNtz

		Close button:
		Set the data-close-target  and the class of things you want to hide
	*/

	var 
	toggleContent = function( $trigger, targetClass) {
		$trigger.toggleClass('active').attr('data-active', 'true');
		$(targetClass).toggleClass('visible').attr('data-visible', 'true');
	},
	hideContent = function() {
		$('[data-active]').removeAttr('data-active').removeClass('active');
		$('[data-visible]').removeAttr('data-visible').removeClass('visible');
	};

	$('[data-toggle-target]').on('click', function() {
		var $this = $(this),
			active = $this.hasClass('active'),
			target = '.' + $this.attr('data-toggle-target');

		hideContent();
		if ( !active ) { toggleContent($this, target); }
	});

	$('[data-close-target]').on('click', function() {
		var $this = $(this),
			active = $this.hasClass('active'),
			target = '.' + $this.attr('data-toggle-target');

		hideContent();
	});
}());