Boekenmemory {GEHEEL}

by bluesweater

HTML

<div class="magazineContainer">

  <div class="pagesContainer">

    <!-- PAGE 1: UITLEG -->
    <div id="page_0" class="pages">
      <!-- Article Start -->
      <div style="overflow: hidden; width: 700px; height: 700px;"><iframe style="overflow: hidden; margin-top: -58px; margin-left: -8px;" src="//jsfiddle.net/bluesweater/hm5upaz1/21//embedded/result" frameborder="0" width="700" height="700"></iframe></div>
      <!-- Article End -->
     
      <div class="goForth next" style="color: #e41414;"><span>2</span></div>
    </div>

    <!-- PAGE 2: MEMORY -->
    <div id="page_1" class="pages">
      <!-- Article Start -->
<div style="overflow: hidden; width: 700px; height: 700px;"><iframe style="overflow: hidden; margin-top: -58px; margin-left: -8px;" src="//jsfiddle.net/bluesweater/vmLws6p9/1//embedded/result" frameborder="0" width="700" height="700"></iframe></div>
      <!-- Article End -->
      <div class="goForth back" style="color: #fff;"><span>Terug</span></div>
     
    </div>

    
  </div>

</div>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">
  $(".pages").hide();
  $("#page_0").show();

  $(".goForth.next").click(function goToNextPage() {
    $(this).parent().hide();
    var parentPage = $(this).parent().attr("id");
    var trimmedparentPage = parentPage.substring(5);
    trimmedparentPage++;
    var nextPage = ("#page_" + trimmedparentPage);
    $(nextPage).show();
  });

  $(".goForth.back").click(function goToPrevPage() {
    $(this).parent().hide();
    var parentPage = $(this).parent().attr("id");
    var trimmedparentPage = parentPage.substring(5);
    trimmedparentPage--;
    var nextPage = ("#page_" + trimmedparentPage);
    $(nextPage).show();
  });

  $("#pageSelector").change(function() {
    $(".pages").hide();
    var optionVal = $("#pageSelector option:selected").attr("value");
    console.log(optionVal);
    var trimmedoptionVal =...