Pagination show/hide

by Matthew Day

HTML

<div id="master" class="book">
  <div id="page1" class="page">1</div>
  <div id="page2" class="page inactive">2</div>
  <div id="page3" class="page inactive">3</div>
</div>
<div class="pagination">
  <div id="previous" class="go">&lt;</div>
  <div id="next" class="go">&gt;</div>
</div>

CSS

* {
  box-sizing: border-box;
  color: #aaa;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

.book {
  padding: 20px;
  text-align: center;
}

.page {
  border: 1px solid #444;
  color: #007db8;
  display: inline-block;
  font-size: 3rem;
  padding: 70px 60px;
}
.page.inactive {
  display: none;
}

.pagination {
  font-size: 2rem;
  margin-top: 20px;
  text-align: center;
}

.go {
  color: #007db8;
  cursor: pointer;
  display: inline-block;
  margin: 0 20px;
  transition: color 600ms ease-in-out;
}

.go:hover {
  color: crimson;
}

JavaScript

(function($) {

	let app = {
  	currentPageNo: 1,
  	init: function() {
			app.goNext();
      app.goPrevious();
    },
    goNext: function() {
    	$(document).on('click', '#next', function() {
        app.currentPageNo = app.currentPageNo + 1;
        return app.showPage(app.currentPageNo - 1, app.currentPageNo);
      });
    },
    goPrevious: function() {
			$(document).on('click', '#previous', function() {
        app.currentPageNo = app.currentPageNo - 1;
        return app.showPage(app.currentPageNo + 1, app.currentPageNo);
      });
    },
    showPage: function(prevP, newP) { console.log(prevP, newP);
    	let prevPage = document.getElementById(`page${prevP}`);
      let newPage = document.getElementById(`page${newP}`);
    	$(prevPage).addClass('inactive');
      $(newPage).removeClass('inactive');
    }
  };
  
  $(document).ready(function() {
  	app.init();
  })
  
})(window.jQuery)