Toggle Links

by csornmo

HTML

<div class="link">link 1</div>
<div class="link">link 2</div>
<div class="link">link 3</div>
<div class="link">link 4</div>
<div class="link">link 5</div>
<div class="link">link 6</div>
<div class="link">link 7</div>
<div class="link">link 8</div>
<div class="link">link 9</div>
<div class="link">link 10</div>

CSS

.link:nth-of-type(1n+5) {
	display: none;
}

.link.show {
	display: block;
}

.toggleLinks {
	color: #0066b3;
	background: transparent;
	border: 0;
	border-radius: none;
	text-decoration: underline;
	margin: 10px 0;
	padding: 0;
	cursor: pointer;

	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
	
	outline: none;
}

JavaScript

if ( $('.link').length > 4 ) {
	$('.link').last().after('<button class="toggleLinks">Visa mer</button>');
}

$(document).on('click', '.toggleLinks', function() {
	$(this).prevAll().toggleClass('show');
	$(this).text(function(i, text){
		return text === "Visa mer" ? "Visa mindre" : "Visa mer";
	});
});