I have two divs on a page (id's MAY and JUNE) and two buttons on the page. The page startes off by showing the May div, with the June div hidden using css display: none

I am trying to create the correct javascript that will toggle between the two of them, but (after searching on here) I can only manage to get one to work.

Codepen showing issue is <https://codepen.io/billteale/pen/zwBBez>

```
<a href="#" id="button" >MAY</a>
<a href="#" id="button" >JUNE</a>
<!-- first div, shows on page load -->
<div id="MAY">
      <div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>May 2017</strong></h1>
     </div>
<!-- second div, hidden originally -->
  <div class="hidden" id="JUNE"> 
      <div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>June 2017</strong></h1>
      </div>

```

...and the current js is

```
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
  var div = document.getElementById('MAY');
  if (div.style.display !== 'none') {
    div.style.display = 'none';
  }
  else {
    div.style.display = 'block';
  }
};

```

Eventually I will have four or more divs to toggle between, with each button showing its relevant div, and hiding the others.

Can anybody tell me how to add to the code I have here to make this work for multiple elements?