[Dilettante_Pro]

<style>
.hide { display:none;}
div { display:inline-block;
        color:grey }
.current { color:black; }
</style>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
var pages = document.querySelectorAll('div');
[].forEach.call(pages, function(el, i, p) {
   p[i].onclick = function() {
        for(var j = 0; j < p.length; j++) { 
           p[j].classList.add("hide"); 
           p[j].classList.remove("current");
        }
        for(var j = i - 1 < 0?0:i-1; j < (i+2 <p.length?i+2:p.length);j++) {      
           p[j].classList.remove("hide");
        }
        p[i].classList.add("current");
   }
});
</script>