PDA

View Full Version : AJAX Slider Close Help



jickpictures
09-18-2011, 10:40 AM
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?


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


$('#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!