Custom post type - use ajax to display sub pages

Question

I have a custom post type named Product Pages, each product page has 3 custom fields , Overview,Details , Pricing , which are links to the children of the page.

I want to display the content of each children (when custom field clicked) in a div in the parent page.

Example. Product 1

• Overview
• Details
• Pricing

When i click on overview (for example) i want the content of the child page named overview(which's link i have in the custom field overview) to be displayed inside my div named "subpage-container".

I guess i need ajax and jquery, but i couldnt think a good way to do that. Any help please?

My code so far( i use Advanced Custom Fields) : single-productpages.php

<nav class="productsnav" >

<a href="<?php  the_field('overview') ?>">
 Overview
</a>    

<a href="<?php  the_field('details') ?>">
  Details 
</a>    

<a href="<?php  the_field('pricing') ?>">
 Pricing 
</a>    


</nav>

Answer 1

I found the solution using the load() function of jquery, simply add a click event for the clicked element and use load() to the element you want.