<style>
div { background:#ff6600;color:#ffffff; margin:5px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<button>Toggle</button>
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>#1 jquery toggle content</div>
<div>
#2 jquery toggle content </div>
<div>
#3 jquery toggle content </div>
<div>
#4 jquery toggle content </div>
<script>
$("#showr").click(function () {
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
});
$("#hidr").click(function () {
$("div").hide(1000);
});
</script>
<script>
$("button").click(function () {
$("div").slideToggle("fast");
});
</script>