jQuery work samples with accordion behavior

[mcChris]

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() {
		$('.work').hide();
		$('h3.heading').eq(3).addClass('active');
		$('.work').eq(3).show();
		
		$('h3.heading').click(function(){
			$('.work:visible').slideUp('slow');
			$(this).next('.work').slideDown('3000');
			$('li > h3.heading').removeClass('active');
			$(this).toggleClass('active');
		});
	});
</script>

here's my html:

			<ul id="projects">
				<li>
					<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>
					</ul>
					<div class="projContent">
						<img src="projects/compA.jpg" width="528" height="260" alt="Utah Prenatal Massage" />
						<p class="details">blah blah blah</p>
					</div>
					<ul class="projFoot">
							<li><a>details</a></li>
							<li class="last"><a>visit site</a></li>
					</ul>
					</div>
				</li>
</ul>

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?