We are using CSS to create a sidebar for navigation. We want to have the user click on various items in the sidebar and the selected info (from a file on the server) display in the content area without having to reinvoke the page.

We use CSS, HTML, PHP, and JavaScript. If JavaScript could read a server file, that would make it easy. We would prefer not to have to preload the files into PHP variables if we don't have to do so.

Is there a way to do this? Here is what we have at present:
Code:
<html>
<style type="text/css">
input.btnhealth {
      color:#FFF;
      background-color: #1080FF;
      background-image: url('images/goldon.gif');
      height: 32px;
      width: 122px;
      font: bold 16px 'trebuchet ms',helvetica,sans-serif;
      color:#000;
    }

input.healthover {
      color:#FFF;
      background-color: #1080FF;
      background-image: url('images/golden.gif');
      height: 32px;
      width: 120px;
      font: bold 16px 'trebuchet ms',helvetica,sans-serif;
    }

input.btnhealthclick {
      color:#900;
      background-color: #FFA;
      height: 40px;
      width: 150px;
      font: bold 18px 'trebuchet ms',helvetica,sans-serif;
    }
#outer-container {
    width: 990px;
    margin: 0 auto;
}
#header {
    width: 990px;
    height: 90px;
    background-color: blue;
}
#footer {
    width: 984px;
    background-color: red;
    float: center;
}
#content-container {
    width: 800px;
    height: 400px;
    background-color: green;
    margin: 2px 0px 2px 0px;
    float: left;
}
#left-sidebar {
    width: 146px;
    height: 400px;
    background-color: #FFFFAA;
    margin: 2px 2px 2px 0px;
    float: left;
    text-align: center;
}
#top-Nav {
    width: 990px;
    height: 100px;
    background-color: black;
    margin: 2px 0px 0px 0px;
}
</style>
<body>
<div id="outer-container">
  <div style="clear: both"></div>
    <div id="top-Nav"></div>
     <div style="clear: both"></div>
     <div id="left-sidebar">
       <br><br><br><h2>Subject:</h2>
       <a href="" onclick="submit('cancer.htm')">Cancer</a><br>
       <a href="" onclick="submit('diabetes.htm')">Diabetes</a><br>
       <a href="" onclick="submit('obesity.htm')">Obesity</a><br>
    </div>
    <div id="content-container" name="display_area">
       <h2>We need the file contents displayed here</h2>
    </div>
    <div style="clear: both">
    </div>
</div>
</div>
<center>
<div id="footer">
        <h2>Promotional blurb goes here!!</h1>
</div></center>
</div>
</body>
<script type=text/javascript>
function submit(text) { alert(text); return false; }  // well, javascript cannot read files from the server... now what?
</script>
</html>