Simple jquery Demonstration show hide Toggle slide fade

Simple jquery Demonstration show hide Toggle slide fade

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
function showSlidingDiv(){
$("#slidingDiv").animate({"height": "toggle"}, { duration: 1000 });
}

$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
// shows the slickbox on clicking the noted link
$('#slick-show').click(function() {
$('#slickbox').show('slow');
return false;
});
// hides the slickbox on clicking the noted link
$('#slick-hide').click(function() {
$('#slickbox').hide('fast');
return false;
});

// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});

$('#slick-down').click(function() {
$('#slickbox').slideDown('slow');
return false;
});
$('#slick-up').click(function() {
$('#slickbox').slideUp('slow');
return false;
});
$('#slick-slidetoggle').click(function() {
$('#slickbox').slideToggle('slow');
return false;
});
$('#slick-fadeIn').click(function() {
$('#slickbox').fadeIn('slow');
return false;
});
$('#slick-fadeOut').click(function() {
$('#slickbox').fadeOut('slow');
return false;
});
});
</script>
<style>
#slidingDiv {
display: none;
height:300px;
background-color: #99CCFF;
padding:20px;
width:20%;
}
#slickbox {
display: none;
height:100px;
background-color: #99CCFF;
padding:20px;
width:20%;
}
</style>
<a href="#" onClick="showSlidingDiv(); return false;">Show/hide - Sliding Div</a><br />
<div id="slidingDiv">
Fill this space with really interesting content that you can <a href="#" onClick="showSlidingDiv(); return false;">hide</a>
</div>

<p>
<a href="#" id="slick-show">Show the box</a>
<a href="#" id="slick-hide">Hide the box</a>
<a href="#" id="slick-toggle">Toggle the box</a>
</p>
<div id="slickbox">This is the box that will be shown and hidden and toggled at your whim. :)</div>

<p>
<a href="#" id="slick-down">Slide the box down</a>
<a href="#" id="slick-up">Slide the box up</a>
<a href="#" id="slick-slidetoggle">Slide toggle the box</a>
</p>
<p>
<a href="#" id="slick-fadeIn">Fade In</a>
<a href="#" id="slick-fadeOut">Fade Out</a>
</p>

Demo

http://dl.dropbox.com/u/7106563/r-ednalan/jquery-show-hide.html