On my portfolio page I have this setup:

<div id="portfolio">
        <ul id="sites">
          <li>
            <h3><a href="#">MotorSomethin</a></h3>
            <img src="http://dummyimage.com/265x100/000/fff" />
            <p>
              We tried going for a very dark but flashy look for this website. Hence the reason we used flash.
            </p>
          </li>
          <li>
            <h3><a href="#">MotorSomethin</a></h3>
            <img src="http://dummyimage.com/265x100/000/fff" />
            <p>
              We tried going for a very dark but flashy look for this website. Hence the reason we used flash.
            </p>
          </li>
          <li>
            <h3><a href="#">MotorSomethin</a></h3>
            <img src="http://dummyimage.com/265x100/000/fff" />
            <p>
              We tried going for a very dark but flashy look for this website. Hence the reason we used flash.
            </p>
          </li>
          <li>
            <h3><a href="#">MotorSomethin</a></h3>
            <img src="http://dummyimage.com/265x100/000/fff" />
            <p>
              We tried going for a very dark but flashy look for this website. Hence the reason we used flash.
            </p>
          </li>
          <li>
            <h3><a href="#">MotorSomethin</a></h3>
            <img src="http://dummyimage.com/265x100/000/fff" />
            <p>
              We tried going for a very dark but flashy look for this website. Hence the reason we used flash.
            </p>
          </li>
        </ul>
      </div>

So imagine a grid, 2 sites per line.

I want to use jQuery so that when I click the H3, the image, or the paragraph inside the LIE(which are all information about a certain site), it would fade out the entire UL, then grab info about that site from our database.

I think this requires AJAX but I don't have much experience with it. I'm also confused on how to use jQuery to write the new HTML after the information is grabbed.