Page Turning function

HTML

<body>

  <div class="full_section gallery_container">

    <div id="Test_Page_01" class="content_section text_section_a Page color_style_a_1">
      PAGE 01

      <div class="button_normal button_right color_style_a_1" data-turn_to="#Test_Page_02" onclick="Page_Turn()">
        NEXT
      </div>

    </div>



    <div id="Test_Page_02" class="content_section text_section_a Page color_style_b_1">
      PAGE 02

      <div class="button_normal button_right color_style_b_1" data-turn_to="#Test_Page_01" onclick="Page_Turn()">
        PREVIOUS
      </div>

      <div class="button_normal button_right color_style_b_1" data-turn_to="#Test_Page_03">
        NEXT
      </div>

    </div>



    <div id="Test_Page_03" class="content_section text_section_a Page color_style_c_1">
      PAGE 03

      <div class="button_normal button_right color_style_c_1" data-turn_to="#Test_Page_02" onclick="Page_Turn()">
        PREVIOUS
      </div>

      <div class="button_normal button_right color_style_c_1" data-turn_to="#Test_Page_04" onclick="PageTurn()">
        NEXT
      </div>

    </div>



    <div id="Test_Page_04" class="content_section text_section_a Page color_style_d_1">
      PAGE 04

      <div class="button_normal button_right color_style_d_1" data-turn_to="#Test_Page_03" onclick="Page_Turn()">
        PREVIOUS
      </div>

    </div>

  </div>

</body>

CSS

body {
  background-color: #444;
}

.gallery_container {
  width: 100%;
  height: 100%;
  display: block;
  margin-top: 11em;
  padding: 2em;
}

.Page {
  height: 44em;
  margin: auto;
  border-radius: 0.33em;
  position: relative;
}

#Test_Page_01 {
  display: block;
}

#Test_Page_02 {
  display: none;
}

#Test_Page_03 {
  display: none;
}

#Test_Page_04 {
  display: none;
}


/* Just framework n colors n stuff */

.full_section {
  width: 100%;
  height: auto;
}

.text_section_a {
  font-size: 1.3em;
}

.content_section {
  width: 92%;
  margin: auto;
  display: block;
}

.button_normal {
  width: 22%;
  font-size: 1.2em;
  font-style: italic;
  text-align: center;
  border-radius: 0.44em;
  padding: 0.44em;
}

.button_right {
  float: right;
  margin: 2em 2em 2em 0;
  display: block;
}

.color_style_a_1 {
  border-style: ridge;
  border-color: #84D5f5;
  border-width: .11em;
  color: #BAD5FF;
  background-color: rgba(56, 220, 242, 0.11);
  box-shadow: 0 0 3em rgba(56, 165, 242, 0.44);
  text-shadow: 0 0 1em rgba(56, 165, 242, 0.88);
}

.color_style_b_1 {
  border-style: ridge;
  border-color: #888;
  border-width: .11em;
  color: #e0e0e0;
  background-color: rgba(150, 150, 150, 0.11);
  box-shadow: 0 0 3em rgba(222, 222, 222, 0.44);
  text-shadow: 0 0 1em rgba(222, 222, 222, 0.88);
}

.color_style_c_1 {
  border-style: ridge;
  border-width: .11em;
  border-color: #B54E0E;
  color: #F2F1B8;
  background-color: rgba(201, 178, 115, 0.11);
  text-shadow: 0 0 1em rgba(247, 209, 37, 0.88);
  box-shadow: 0 0 3em rgba(247, 209, 37, 0.44);
}

.color_style_d_1 {
  border-style: ridge;
  border-width: .11em;
  border-color: #F29DF2;
  color: #FACDFA;
  background-color: rgba(156, 111, 252, 0.11);
  text-shadow: 0 0 1em rgba(232, 67, 218, 0.88);
  box-shadow: 0 0 3em rgba(232, 67, 218, 0.44);
}

JavaScript

$('[data-turn_to]').on('click', function() {
  var turn = $(this).attr("data-turn_to");
  $(this).parent().css("display", "none");
  $(turn).css('display', 'block');
});