using jquery to slide up and down while hiding the previous
hi there - i'm a complete newbie to jquery (but lovin' it) and not sure how to title this post so excuse me if i'm not using the right terminology.
my setup
javascript
-
<script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(".nav1").click(function () {
$("div.body2").slideToggle("slow");
});
$(".nav2").click(function () {
$("div.body3").slideToggle("slow");
});
$(".nav3").click(function () {
$("div.body4").slideToggle("slow");
});
$(".nav4").click(function () {
$("div.body5").slideToggle("slow");
});
});
</script>
HTML
-
<ul>
<li><a href="#" class="nav1">nav item1</a></li>
<li><a href="#" class="nav2">nav item2</a></li>
<li><a href="#" class="nav3">nav item3</a></li>
<li><a href="#" class="nav4">nav item4</a></li>
</ul>
<div class="body0"></div>
<div class="body1" style="display:none;"></div>
<div class="body2" style="display:none;"></div>
<div class="body3" style="display:none;"></div>
<div class="body4" style="display:none;"></div>
what i want it to do
so with this set up, i've managed to make my div's able to slide up and down the when you click on on of the nav item (nested in the li's). but what i really want it to do is close the previous div as you click on the next nav item. any help is greatly appreciated!
i've searched through the entire jquery website and this forum site for an answer but due to my lack of javascript terminology i'm lost at what to exactly search for.
thanks ahead time!