i'm trying to get my portfolio online and want to use an accordion-like behavior for my samples...

here's my js:

<script type="text/javascript">
	$(document).ready(function() {
			$('li > h3.heading').removeClass('active');
here's my html:

			<ul id="projects">
					<h3 class="heading"><span>1 | </span>Company A</h3>
					<div class="work">
					<ul class="projHead">
						<li class="number">1 |</li>
						<li class="name"><h3>Company A</h3></li>
						<li class="arrow"><!--spanner--></li>
					<div class="projContent">
						<img src="projects/compA.jpg" width="528" height="260" alt="Utah Prenatal Massage" />
						<p class="details">blah blah blah</p>
					<ul class="projFoot">
							<li class="last"><a>visit site</a></li>
i've got this all styled correctly, and it functions correctly if i include display:none; in the css; however, i'm wanting to go a more accessible route, and have attempted to use both .hide(); and .css('display', 'none'); in the js...but, while the content hides as intended, the space taken up by the content remains...any thoughts on how i can get rid of it?...

also, i want the 'details' info to fadeIn and fadeOut on click and i'm unsure how to incorporate this action into the js...any ideas?