How to implement AJAX post navigation into WordPress?

I am developing a wordpress page template exactly like this.
I have completed the design and have loaded the template once user goes to this page which using my template. I want to all posts in more article list open in this template without refreshing the page. but when i click on any post in the list it opens in a new page which is off course different from my page template. Please guide me how i can open the posts in the “more article” list open in my template.
Here is my code i have till now.

<?php  if ( have_posts() ):
    while ( have_posts() ) :
        the_post(); ?>

  <div id="main" class="left-half" style="  background-image: url(<?php echo intrigue_get_attachment(); ?>);       width:50%; display: inline-block; float: right; position: fixed;  ">
      <h2 style="diplay:inline-block"><a href="<?php echo esc_url( home_url( '/' ) );?>"><?php bloginfo( 'name' );?></a></h2> 
  <input id="morearticlesbtn" class="button" type="button" onclick="openNav()" value="More Articles "> 
  <div class="row">
  <div class="post-meta col-md-6">
      <p>July 18, 2017</p>
      By: <a href="#">James Crock </a>
      <a href="#"> Transport</a> 
  </div>
      <div class="col-md-6">
          <div class="line"></div>
      </div>
  </div>


  <div class="title-div">
      <a href="<?php echo the_permalink() ?>"> <h1 class="title"><?php the_title() ?></h1></a>
  </div>

  <div class="row">
      <div class="col-md-9" >
          <div class="line bottom-line"></div>
      </div>
  <div class="col-md-3 bottom-line-text">
  <h4>Next</h4>
  </div>

    </div>
    </div>

  <div id="right" class="right-half" style="width: 50%; display: inline-block; float:right;">
      <div class=" content-div">
       <?php the_content();?>
      </div>
      <div class="tags content-div clear-fix">
           <h6>Tags:</h6> 
           <?php echo get_the_tag_list();?>
<!--      <a href="#"><h6>Promotional</h6></a><a href="#"><h6>Pop-Ups</h6></a>-->
      </div>
</div>


 <?php endwhile;   endif;              ?>               

<!--   
THE OFFCANVAS MENU
    -->



    <div id="mySidenav" class="sidenav menu">
    <div class="hidden-menu-div">
  <input class="button close-button" type="button" onclick="closeNav()" value="Hide List "> 
  <div>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
  <a href="#search">Search</a>
  </div>
  </div>

        <?php  
                $temp = $wp_query; $wp_query= null;
        $wp_query = new WP_Query(); $wp_query->query('posts_per_page=6' . '&paged='.$paged);
        while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

        <div class="col-sm-6 hiden-cat-post">
            <a href="<?php echo the_permalink(); ?>" class="hidden-cat-item">
                <div class="hidden-cat-thumbnail" ><?php the_post_thumbnail(array(340, 230))?> </div>
                <div class="hidden-cat-item-text">
                    <h1 class="hidden-cat-item-title"> <?php the_title(); ?> </h1>
                    <div class="excerpt"></div>
                    <div class="hidden-item-meta">jul 10,2017</div>
                </div>
            </a>
        </div> 

   <?php endwhile; ?>
  <?php if ($paged > 1) { ?>

        <nav id="nav-posts">
            <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
            <div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
        </nav>

        <?php } else { ?>

        <nav id="nav-posts">
            <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
        </nav>

        <?php } ?>

        <?php wp_reset_postdata(); ?>


    </div>  






<!--

  SCRIPT
    -->

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "50%";
    document.getElementById("main").style.marginLeft = "50%";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}