How can I sequentially show different <div> elements with each click of a button?

I want to display a series of hidden elements one at a time each time a button is clicked. Initially, only div1 is visible. On each button click:

1. div1 should be hidden, and div2 shown
2. On the next click, div2 is hidden, and div3 is shown
3. This continues through div6

All divs (div2 to div6) are initially hidden with style="display:none;".

Here's the HTML:

<div id="div1">Content 1</div>
<div id="div2" style="display:none;">Content 2</div>
<div id="div3" style="display:none;">Content 3</div>
<div id="div4" style="display:none;">Content 4</div>
<div id="div5" style="display:none;">Content 5</div>
<div id="div6" style="display:none;">Content 6</div>
<button id="button">Next</button>

Here you go.

EDIT

If you want to go to new page after last div just add else statement and add some attribute to send url.

$("#button").on('click', function() {
  var visible = $("[id^=div]:visible"),
    number = parseInt(visible.attr('id').substr(3)) + 1,
    nextDiv = $("#div" + number);
  if (nextDiv.length > 0) {
    visible.hide();
    nextDiv.show();
  } else {
    location.href = $(this).attr("data-href");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1'>
  Content 1
</div>
<div id='div2' style="display:none;">
  Content 2
</div>
<div id='div3' style="display:none;">
  Content 3
</div>
<div id='div4' style="display:none;">
  Content 4
</div>
<div id='div5' style="display:none;">
  Content 5
</div>
<div id='div6' style="display:none;">
  Content 6
</div>
<button id="button" data-href="https://stackoverflow.com/">Next</button>