Can't show 1 div at a time, Jquery

I'm having a bit of hard time with a peice of jQuery script.

I am trying to show a show/hide of one div at a time. What is happening is that all the divs (.slidingDiv) are opening at the same time. Below is my code:

01.<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
02.<script type="text/javascript">
03.$(document).ready(function(){
04.$(".slidingDiv").hide();
05.$("#btn-swap").show();
06.$("#btn-swap").click(function(){
07.$('.img-swap').each(function(){
08.if($(this).hasClass('on')){
09.this.src = this.src.replace("_off","_on");
10.} else {
11.this.src = 开发者_如何转开发this.src.replace("_on","_off");
12.}
13.$(this).toggleClass("on");
14.});
15. 
16.$(".slidingDiv").slideToggle();
17.});
18.});
19.</script>

01.<a href="#" id="btn-swap" >
02.<div  class="togglebg"><table>
03.<tr>
04.<td>&nbsp;&nbsp;&nbsp;<img src="images/plus_on.gif" class="img-swap"/></td>
05.<td width="864" align="center" valign="middle" class="specshead">Engine</td>
06.<td ><img src="images/show_on.gif" class="img-swap"/>&nbsp;</td>
07.</tr>
08.</table>
09.</div></a>
10.<div id="foo"  class="slidingDiv">this is foo</div>
11.<a href="#" id="btn-swap" >
12.<div  class="togglebg"><table >
13.<tr>
14.<td >&nbsp;&nbsp;&nbsp;<img src="images/plus_on.gif" class="img-swap"/></td>
15.<td class="specshead">Engine</td>
16.<td ><img src="images/show_on.gif" class="img-swap"/>&nbsp;</td>
17.</tr>
18.</table>
19.</div></a>
20.<div id="foo2"  class="slidingDiv">this is foo2</div>

---

http://api.jquery.com/show/

The matched elements will be revealed immediately, with no animation.

See the plural

---

How about

 $(".slidingDiv").each(function(i) {
        $(this).delay(1000*i).hide(0);
    });

---

Maby you could use

function(number) {
    $(".slidingDiv").hide();
    $("#foo".number).show();
}

and then just call the function with all the divs numbers one by one with a delay.