How can I make a link in one div open to replace another div that's a seperate file?

[Laura Wilkinson]

Hello :),

Basically, I am creating a website and the "frames" I've created are made from divs. I want to make my code, so that when a link in the left column is clicked, a different page, with the same format as the main div appears in it's place. I can include the code I've done (which might be me making it complicated). If you could help, that would be lovely!

Here's the code;

 
<div id="leftcolumn">
        <h2>
        Links
        </h2>
        <p>
        <ul>
        <il><a onclick="display_area('home.html')">Home</a></il>
        <br /><br />
        <il><a onclick="display_area('XMLPage/xml.html')">XML Page</a></il>
        <br /><br />
        <il><a onclick="display_area('SlideShow/slideshow.html')">Slide Show</a></il>
        <br /><br />
        <il><a onclick="display_area('Calculator/calculator.html')">Calculator</a></il>
        <br /><br />
        <il><a onclick="display_area('OrderForm/order.html')">Order Form</a></il>
        <br /><br />
        <il><a onclick="display_area('MyReport/report.html')">My Report</a></il>
        </ul>
    </div>
 
    <div id="homearea">
    <div id="homecontent">
 
    Displayed on initial page load.
 
    </div>
 
        <div id="home" style="display:none"><?php include("home.html"); ?></div>
        <div id="xml" style="display:none"><?php include("XMLPage/xml.html"); ?></div>
        <div id="slideshow" style="display:none"><?php include("SlideShow/slideshow.html"); ?></div>
        <div id="calculator" style="display:none"><?php include("Calculator/calculator.html"); ?></div>
        <div id="order" style="display:none"><?php include("OrderForm/order.html"); ?></div>
        <div id="report" style="display:none"><?php include("MyReport/report.html"); ?></div>
 
    </div>
 
    <div id="footer">
    </div>
 
</div>
</body>
 
    <script type="text/javascript">
    var dLast=document.getElementById('homecontent');
    var dCurrent;
    function display_area(s)
    {
    new_area=document.getElementById('s');
    dLast.style.display="none";
    new_area.style.display="block";
    dLast=new_area;
    }
    </script>
 
</html>