Minimal showMore JS-Module

showMore.html

<div data-show-more>
	<div data-show-more-content>
		...
	</div>
	<button type="button" data-show-more-toggle>
		<span class="more">Show more</span>
		<span class="less">Show less</span>
	</button>
</div>

showMore.js

var showMore = (function(){

	function init() {
		$('[data-show-more]').each(function(){
			init_one(this);
		});
	}
	
	function init_one(one) {
		$one = $(one);
		$toggle = $one.find('[data-show-more-toggle]');
		
		$toggle.click(function(){
			$one.toggleClass('active');
		});
	}

	return {
		init : init
	};

})();

showMore.scss

[data-show-more] {
	
	[data-show-more-content] {
		display: none;
	}
	
	[data-show-more-toggle] .less {
		display: none;
	}
	
	&.active {
		
		[data-show-more-content] {
			display: block;
		}
		
		[data-show-more-toggle] {
			.more {
				display: none;
			}
			.less {
				display: inline;
			}
		}
	}
}