2. <a id='bonus_details_link_1' href='#'>Link 1</a> 
3. <div id='bonus_details_1' style='display:none'>Details 1</div>
4. 
   
5. <a id='bonus_details_link_2' href='#'>Link 2</a> 
6. <div id='bonus_details_2' style='display:none'>Details 2</div>
7. 
   
8. <script type="text/javascript" src="jquery-1.5.min.js"></script>
9. 
   
10. <script type="text/javascript">
11. $(document).ready(function() {
12. elem1 = '#bonus_details_link_1';
13. elem2 = "#bonus_details_1";
14. $(elem1).click(function() {
15. $(elem2).toggle('fast');
16. return false;
17. });
19. elem1 = '#bonus_details_link_2';
20. elem2 = '#bonus_details_2';
21. $(elem1).click(function() {
22. $(elem2).toggle('fast');
23. return false;
24. });
25. });
26. 
    
27. </script>

If I click "Link 1" I get "Detail 2" visible :) But if I change my code:

2. $(document).ready(function() {
3. $('#bonus_details_link_1').click(function() {
4. $("#bonus_details_1").toggle('fast');
5. return false;
6. });
8. $('#bonus_details_link_2').click(function() {
9. $("#bonus_details_2").toggle('fast');
10. return false;
11. });
12. });

It works as I expect. Why?