title: How to make a next button disappear once it's no longer clickable?
body: <p>I'm trying to design a simple website with content in the center and prev and next buttons.</p>
  
  <p>I would like the next button to disappear or become un-clickable once there are no more pages left to click.</p>
  
  <p>Here's what I have so far:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;DIV Test&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;div class="case active" id="content"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam dolores optio necessitatibus.&lt;/div&gt;
    &lt;div class="case" id="content"&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit dolore optio, fuga quae accusantium ratione possimus odit vel exercitationem porro temporibus quos repudiandae ut aperiam aliquid? Facilis enim, quas iure officia impedit labore, fugiat doloribus obcaecati, quis assumenda deleniti?&lt;/div&gt;
    &lt;div class="case" id="content"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita autem consequatur perspiciatis quasi voluptatibus temporibus architecto et, qui nihil iure!&lt;/div&gt;
    &lt;div class="case" id="content"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas commodi mollitia ipsam?&lt;/div&gt;
  
  &lt;button id="prev"&gt;&amp;#8249;&lt;/button&gt;
  &lt;button id="next"&gt;&amp;#8250;&lt;/button&gt;
  
  
  &lt;/body&gt;
  &lt;script&gt;
  $(function() {
      var nextBtn = $("#next"),
          prevBtn = $("#prev");
  
      nextBtn.on('click', function(e) {
          var active = $(".active");
          var next = active.next('.case');
          if (next.length) {
              active.removeClass('active');
              next.addClass('active');
          }
      });
      prevBtn.on('click', function(e) {
          var active = $(".active");
          var prev = active.prev('.case');
          if (prev.length) {
              active.removeClass('active');
              prev.addClass('active');
          }
      });
  });
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the CSS style:</p>
  
  <pre><code>.active {
      display: block !important;
    }
    .case {
        display: none;
    }
    button {
      border: none;
      background-color: white;
      color: black;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 3.2em;
      padding: 0;
      outline: 0;
    }
  button:focus {
      border: 0;
      outline: 0;
  }
  button:active {
      transform: scale(1.2);
      background-color: white;
      border: 0;
      outline: 0;
  }
    #prev {
      position: absolute;
      left: 5vw;
      bottom: 50vh;
    }
    #next {
      position: absolute;
      right: 5vw;
      bottom: 50vh;
      flex-wrap: wrap;
      justify-content: space-evenly;
        }
    button:hover{
        border: none;
        text-decoration: none;
        color: blue;
    }
    a {
      text-decoration: none;
    }
  
    a:hover {
      color: black;
    }
  
    #content {
      text-align: center;
      align-items: center;
    vertical-align: middle;
    border-color: #000000;
    border-width: 0.51px;
    border-style: solid;
    margin-top: calc(100vh - 75vh);
    margin-bottom: 25vh;
    margin-left: 15%;
    margin-right: 15%;
    border-radius: 1vw;
    padding: 1em 1em 1em 1em;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
  </code></pre>
  
  <p>I want it to be aligned in the center and have switching elements. Maybe i can add some transitions as well. </p>