Open and close accordeon with a navigation - accordion

Question

I´ve got 5 catagories (cat 1, cat 2, cat3.....) and i want that all of the categories are shown, when i click on a navigation item, all the other gets closed and only the selected one is shown, just like an accordeon and when I deselect the nav item, all categories get schon again.
HTML
<div id="main-column-4082" class="mod_article block">
<div class="download_nav">
<ul>
<li class="nav_cat1">Cat 1</li>
<li class="nav_cat2">Cat 2</li>
<li class="nav_cat3">Cat 3</li>
<li class="nav_cat4">Cat 4</li>
<li class="nav_cat5">Cat 5</li>
</ul>
</div>
<div class="clear"></div>
<div class="ce_text ce_downloads cat1 block">
<h3>Cat 1</h3>
<ul>
<li>Test Item</li>
<li>Test Item</li>
<li>Test Item</li>
</ul>
</div>
<div class="ce_text ce_downloads cat2 block">
<h3>Cat 2</h3>
<ul>
<li>Test Item</li>
<li>Test Item</li>
<li>Test Item</li>
</ul>
</div>
<div class="ce_text ce_downloads cat3 block">
<h3>Cat 3</h3>
<ul>
<li>Test Item</li>
<li>Test Item</li>
<li>Test Item</li>
</ul>
</div>
<div class="ce_text ce_downloads cat4 block">
<h3>Cat 4</h3>
<ul>
<li>Test Item</li>
<li>Test Item</li>
<li>Test Item</li>
</ul>
</div>
<div class="ce_text ce_downloads cat5 block">
<h3>Cat 5</h3>
<ul>
<li>Test Item</li>
<li>Test Item</li>
<li>Test Item</li>
</ul>
</div>
</div>
Fiddle
http://jsfiddle.net/Fz33q/5/
Can you help me with that problem?

Answer 1

Please check here for
LIVE DEMO
$(document).ready(function() {
var $topLevelItems = $("inhalte");
$("#nav_cat1").click(function(){
$(".cat2").slideUp(300);
$(".cat3").slideUp(300);
$(".cat4").slideUp(300);
$('#nav_cat2').css('color','black');
$('#nav_cat3').css('color','black');
$('#nav_cat4').css('color','black');
$('#nav_cat1').css('color','red');
$(".cat1").delay(400).slideDown(300);
});
$("#nav_cat2").click(function(){
$(".cat1").slideUp(300);
$(".cat3").slideUp(300);
$(".cat4").slideUp(300);
$('#nav_cat1').css('color','black');
$('#nav_cat3').css('color','black');
$('#nav_cat4').css('color','black');
$('#nav_cat2').css('color','red');
$(".cat2").delay(400).slideDown(300);
});
$("#nav_cat3").click(function(){
$(".cat1").slideUp(300);
$(".cat2").slideUp(300);
$(".cat4").slideUp(300);
$('#nav_cat1').css('color','black');
$('#nav_cat2').css('color','black');
$('#nav_cat4').css('color','black');
$('#nav_cat3').css('color','red');
$(".cat3").delay(400).slideDown(300);
});
$("#nav_cat4").click(function(){
$(".cat1").slideUp(300);
$(".cat2").slideUp(300);
$(".cat3").slideUp(300);
$('#nav_cat1').css('color','black');
$('#nav_cat2').css('color','black');
$('#nav_cat3').css('color','black');
$('#nav_cat4').css('color','red');
$(".cat4").delay(400).slideDown(300);
});
});
Hope this helps you!