Content Toggle

A content toggling example for Learn Article.

by James Mathias

HTML

<h1>Content Header <a href="#" class="toggle-link" data-rel="toggle-test" data-close="Hide" data-open="Show">Show</a></h1>
<div class="toggle-content" data-rev="toggle-test">
	<p>This content is hidden, until the toggle-link is clicked.</p>
</div>

CSS

.toggle-content{
	display: none;
}

.toggle-open{
	display: block;
}

JavaScript

$('.toggle-link').on('click',function(e){
	var txtIs = $(this).attr('data-open');
	var hideIs = $(this).attr('data-close');
	var objIs = $(this).attr('data-rel');
	var toggleObj = $('[data-rev='+objIs+']');

	if($.trim($(this).text()) === txtIs){
		$(this).text(hideIs);
	}
	else{
		$(this).text(txtIs);
	}

	toggleObj.toggleClass('toggle-open');

	// stop THIS href from loading
	// in the source window
	e.preventDefault();
});