As long as it's text and some small images, don't worry about using AJAX. From a SEO standpoint, it's a much better idea to put the content directly in the page.
Here's how I would go about doing this.
HTML Code:
<ul class="myList">
<li>
<div class="title">Apples</div>
<div class="text">
<p>Some text about apples goes here.</p>
</div>
</li>
<li>
<div class="title">Oranges</div>
<div class="text">
<p>Some text about oranges goes here.</p>
</div>
</li>
<li>
<div class="title">Bananas</div>
<div class="text">
<p>Some text about bananas goes here.</p>
</div>
</li>
</ul>
HTML Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready( function () {
// hide the content for each list item on page load
$("ul.myList div.text").hide();
// display/hide the content when the title item is clicked
$("ul.myList li").click( function () {
$(this).find("div.text").slideToggle();
});
});
//]]>
</script>