Jquery slideToggle problem

Question

<script type="text/javascript">
$(document).ready(function(){
         $("#toggle").toggle(
                function(){
                        $("#box1").slideToggle(800,function(){
                                 $("#box2").slideToggle();
                         });
                },
                function(){
                        $("#box2").slideToggle(800,function(){
                                 $("#box1").slideToggle();
                         });
                }
        );        
});
</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?

Answer 1

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.