Jquery content fade in from 'UL'

[kdubbie]

Hi, kind of new to Jquery and I was wondering if someone can tell me the best way to do this.

I have an <UL>, and I want different content to appear underneath the list in a separate <div> when each line item is clicked...(For example, if one of the <li> were apples, when it's clicked I would want the content underneath to be a paragraph on apples and with a picture of an apple.)

The unordered list is pretty long, about 18 bullets all together, so that's a lot of content. I was first thinking about hiding each of the divs and then with absolute positioning, make them appear when clicking their corresponding <li>...

But it seems like that would be a lot content on one page....So I was thinking about an AJAX call...Having a separte HTML file for each of the content, and then use the load(); function to populate an empty div on the page...To me that seemed a little more organized, but again I'm new to this and not sure if populating a separate HTML file in the middle of page is good or bad or totally fine.

I'd like to do this in JQuery, but open to suggestions of PHP.

Thanks a lot

[tivy]

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.

<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>

<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>