Hey there,

I currently have this code for an AJAX slider, however, I want to add a link that makes the slider collapse for good instead of just changing the content. Can anyone help me figure this out please?

Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jick Pictures</title>
<link type="text/css" rel="stylesheet" media="all" href="site/css/style.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/slide-fade-content/slide-fade-content.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		// Ajax Slide & Fade Content with jQuery @ http://perishablepress.com/slide-fade-content/
		$('.more').live('click',function(){
			var href = $(this).attr('href');
			if ($('#ajax').is(':visible')) {
			$('#ajax').css('display','block').animate({height:'1px'}).empty();
			}
			$('#ajax').css('display','block').animate({height:'500px'},function(){
				$('#ajax').load('site/scripts/slide_content.html #'+href,function(){
					$('#ajax').hide().fadeIn();
				});
			});
			return true;
		});
	});
</script>

</head>
<body>

<div id="topwrapper">
	<div id="topcontent">
		<div class="logo"></div>
		<div id="ajax"></div>
	</div>
</div>
<div id="bottomwrapper">
	<ul>
		<li><a class="more" href="#first-item">First Item</a></li>
		<li><a class="moreclose" href="#">Second Item</a></li>
		<li><a class="more" href="#third-item">Third Item</a></li>
	</ul>
</div>

</body>
</html>
I see that the code includes this line:

Code:
$('#ajax').css('display','block').animate({height:'1px'}).empty();
But I have no idea how to make it work! Any help would be greatly appreciated, thank you!