Howto Show/Hide Data-Section in HTML..?

I 'm currently coding a restaurant's menu in HTML/CSS and I have the following issue... Each page matchs to a data-section which should be shown/hidden as you click on buttons "Previous" and "Next". So, in a nutshell:

  <div id="menu" data-section="page1" style="display:block">
      [...]
  </div>

      <div class="menubuttons">
          <p><a href="menu" class="button" role="button"
          onclick="changepage()">NEXT</a></p>
      </div>

  <div id="menu" data-section="page2" style="display:none">
      [...]
  </div>

First, I thought to develop it as a slideshow, but at the end I prefer to keep doing in this way, so... Is there any posibility to show/hide a data section as you click on buttons ?? Or do I have to code it in different DIV IDs ??.