show_by_click

// SHOW BY CLICK
//
// This self-invoking function returns init function. If you dynamicly modify or add new DOM structure, you can easyly run plugin for new elements.
// Init function needs one argument. Argument can be a DOM node or jQuery object containing element(s) for init.
// Basicly you can change selector by changing "selector" variable. Also you can give your dynamicly created trigger elements a className by changing "triggerClass" variable.
// In the "triggerText" array you can find text for trigger nodes or set it by adding custom "data-show-text" and "data-hide-text" attributes
// Please send BUG reports or any proposals to [email protected]
;(function showByClick ($) {

	if (!$) {
		console.warn('"show by click" requires jQuery');
		return;
	};

	// options
	var selector = 'show-by-click',
		triggerText = [
			'show more',
			'show less'
		],
		triggerClass = 'show-by-click-trigger',
		// other stuff
		$show,
		$hide,
		clickHandler,
		css,
		init;

		// create triggers
		$show = $('<div>')
			.addClass(triggerClass + ' action-show');
		$hide = $('<div>')
			.addClass(triggerClass + ' action-hide');

		clickHandler = function (e) {
				var $_ = $(this),
					$target = $(e.target);
				if (!$target.hasClass( triggerClass )) return;

				if ( $target.hasClass( 'action-show' ) ) {
					$_.addClass('opened');
				} else if ( $target.hasClass( 'action-hide' ) ) {
					$_.removeClass('opened');
				};
			}

	init = function ($parent) {

		if ( typeof $parent !== 'object' ) {
			console.warn('Insert DOM node or jQuery object as first argument');
			return;
		}
		if ( !($parent instanceof $) ) {
			$parent = $($parent);
		}

		$parent.find('.' + selector).each(function () {
			var $_ = $(this),
				showText = $_.attr('data-show-text') || triggerText[0],
				hideText = $_.attr('data-hide-text') || triggerText[1];
			if ( $_.attr('data-inited') ) return;
			$_.attr('data-inited', true);

			$_.on('click', clickHandler);
			$_.append([
					$show.clone().html( showText ),
					$hide.clone().html( hideText )
				]);
		});
	}
	init( $('body') );

	// style node
	css = '' +
		'.' + selector + ':not(.opened) * {' +
			'display: none !important;' +
		'}' +
		'.' + selector + ':not(.opened) .action-show {' +
			'display: block !important;' +
		'}' +
		'.' + selector + ' .action-hide {' +
			'display: none;' +
		'}' +
		'.' + selector + '.opened .action-hide {' +
			'display: block;' +
		'}' +
		'.' + selector + '.opened .action-show {' +
			'display: none;' +
		'}' +
	';'
	$('head').prepend(
			$('<style data-sourse="added from -show by click-" >').html( css )
		);

	return init;

})(jQuery);