pagination auto hide prev & next

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container text-center">
<div class="btn-group">
    <button class="btn btn-secondary">EINS</button>
    <button class="btn btn-primary active">ZWEI</button>
    <button class="btn btn-secondary">DREI</button>
    <button class="btn btn-secondary">VIER</button>
    <button class="btn btn-secondary">FÜNF</button>
    <button class="btn btn-secondary">SECHS</button>
    <button class="btn btn-secondary">SIEBEN</button>
    <button class="btn btn-secondary">ACHT</button>
    <button class='btn btn-secondary'>NEUN</button>
    <button class="btn btn-secondary">ZEHN</button>
    <button class="btn btn-secondary">ELF</button>
    <button class="btn btn-secondary">ZWÖLF</button>
    <button class="btn btn-secondary">DREIZEHN</button>
    <button class="btn btn-secondary">VIERZEHN</button>
    <button class="btn btn-secondary">FÜNFZEHN</button>
</div>
</div>

CSS

/* before .active */

/* after .active */

button {
	width: 100px;
}

button:not(.prev_or_next):not(.active){
  display: none;
}


.nextElem2 {
	background:rgba(0, 114, 138, 0.6);
}

.nextElem3 {
	background:rgba(0, 114, 138, 0.4);
}

.nextElem4 {
	background:rgba(0, 114, 138, 0.2);
}

JavaScript

$(document).ready(function() {
	prev_next();
})

$( "button" ).click(function() {
		$( "button" ).removeClass("active").removeClass("btn-primary").addClass("btn-secondary");
  $( this ).addClass("active").addClass("btn-primary").removeClass("btn-secondary");
	prev_next();
});

function prev_next(){
	$( "button" ).removeClass("prev_or_next");
	$(".active").prev().addClass("prev_or_next");
	$(".active").prev().prev().addClass("prev_or_next");
	$(".active").prev().prev().prev().addClass("prev_or_next");
	//$(".active").prev().prev().prev().prev().addClass("prev_or_next");
	$(".active").next().addClass("prev_or_next");
	$(".active").next().next().addClass("prev_or_next");
	$(".active").next().next().next().addClass("prev_or_next");
	//$(".active").next().next().next().next().addClass("prev_or_next");
}