I started learning jQuery about 2 days ago using the book "jQuery Novice to Ninja" by Sitepoint.

I'm currently working on a project where I need some jQuery-fancy to work so I startet programming my first little plugin, which works flawlessly.

This is the script-code:

2. $(document).ready(function() {
3. $('#aboutme').hide();
4. $('#twitter').hide();
5. $('#contact').hide();
7. $('#aboutmebtn').toggle(function() {
8. $('#aboutmeimg').attr("src", "bilder/aboutme-selected.gif");
9. $('#twitterimg').attr("src", "bilder/twitter.gif");
10. $('#contactimg').attr("src", "bilder/contact.gif");
11. $('#aboutme').animate({ opacity: 'toggle', paddingTop: '+=16px' }, 'slow');
12. $('#twitter').hide();
13. $('#contact').hide();
14. }, function() {
15. $('#aboutmeimg').attr("src", "bilder/aboutme.gif");
16. $('#aboutme').animate({ opacity: 'toggle', paddingTop: '-=16px' }, 'slow');
17. });
18. $('#twitterbtn').toggle(function() {
19. $('#twitterimg').attr("src", "bilder/twitter-selected.gif");
20. $('#aboutmeimg').attr("src", "bilder/aboutme.gif");
21. $('#contactimg').attr("src", "bilder/contact.gif");
22. $('#twitter').animate({ opacity: 'toggle', paddingTop: '+=16px' }, 'slow');
23. $('#aboutme').hide();
24. $('#contact').hide();
25. }, function() {
26. $('#twitterimg').attr("src", "bilder/twitter.gif");
27. $('#twitter').animate({ opacity: 'toggle', paddingTop: '-=16px' }, 'slow');
28. });
29. $('#contactbtn').toggle(function() {
30. $('#contactimg').attr("src", "bilder/contact-selected.gif");
31. $('#aboutmeimg').attr("src", "bilder/aboutme.gif");
32. $('#twitterimg').attr("src", "bilder/twitter.gif");
33. $('#contact').animate({ opacity: 'toggle', paddingTop: '+=16px' }, 'slow');
34. $('#twitter').hide();
35. $('#aboutme').hide();
36. }, function() {
37. $('#contactimg').attr("src", "bilder/contact.gif");
38. $('#contact').animate({ opacity: 'toggle', paddingTop: '-=16px' }, 'slow');
39. });
40. });

What this thing does: It displays three images side by side and when you click one, content comes into view. Only on section of the three can be displayed at the same time.

Now I was asking myself, since this is a pretty easy task if the code isn't way too long? I'm sure there are some protips which help me getting rid of a line or two.