Jquery slideToggle problem

<script type="text/javascript">
$(document).ready(function(){
         $("#toggle").toggle(
                function(){
                        $("#box1").slideToggle(800,function(){
                                 $("#box2").slideToggle();
                         });
                },
                function(){
                        $("#box2").slideToggle(800,function(){
                                 $("#box1").slideToggle();
                         });
              开发者_如何学Go  }
        );        
});
</script>

    <div id="box1">
     <a href="#" class="order" id="toggle">&nbsp;</a>
    </div>
    <div id="box2" style="display:none;">
     <a href="#" class="back" id="toggle">&nbsp;</a>
    </div>

1. It works only for the first click. When I click it again it doesn't slide back.
2. How to animate it to slide left to right?

---

You can't use the same "id" value for both of those <a> elements. You gave them different "class" values; maybe you should swap the values for the "class" and "id" attributes.

---

Firstly you can't have same id for two elements. Secondly jQuery native slide animation works only in top down direction.

<script type="text/javascript">
$(document).ready(function(){
     $(".toggle.order").click(
            function(){
                    $("#box1").slideToggle(800,function(){
                             $("#box2").slideToggle();
                     });
            });
     $(".toggle.back").click(
            function(){
                    $("#box2").slideToggle(800,function(){
                             $("#box1").slideToggle();
                     });
            });    
});
</script>

<div id="box1">
 <a href="#" class="order toggle">&nbsp;</a>
</div>
<div id="box2" style="display:none;">
 <a href="#" class="back toggle">&nbsp;</a>
</div>