Loading page all content and scripts inside another

Question

If you go to this page on our website: http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/dahab-divemaster-training.html

The buttons at the bottom that say 'Beginner' 'Open Water Diver' etc.... They take you to another page where you have a series of options and can book.

We would like it so that rather than have to navigate to another page it loaded those options and all the scripts that make the calculations in a div on the first page. Depending on which button you press depends on which page it would load inside the div.

IFrame does not work as it does not dynamically resize when the collapsible panels are opened. AJAX script at dynamic drive. http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm does not work as none of the collapsible panels work, nor does the calculation script.

How can this be done. To sum it up it would be like turning the buttons at the bottom of the page into tabs that would display the content from the pages those buttons currently link through to.

Is this possible.

Answer 1

Use Jquery, get the data through the $.get() method and use that data to do $('#myDiv').html(data);

E.g:

HTML

<a href="#" id="getData">Get data</a>
<div id="myContainer"></div>

JS

$('#getData').click(function(){
    $.get('data.php', { section: 'mySection' }, function(data){
       $('#myContainer').html(data);
    });
});

PHP:

<?php
    if($_GET['section'] === 'mySection') echo '<span style="font-weigth:bold;">Hello World</span>';
?>

That's the easiest way to do it. If you need any help with $.get() and/or .html() look at here:

• http://api.jquery.com/jQuery.get/
• http://api.jquery.com/html/