Hello guys!

I'm new for what jQuery means and I encountered an annoying issue ( it's more like a loop ).
Let me explain:
I have two different divs ( call them div1 & div2 ) positioned one above the other and I have a link that is interacting with the divs. So I'm trying to sort this thing out: when you click the link the div1 that is shown should fade out and the other one should fade in, div2 of course ( I made this possible ). After the second one faded, WHEN YOU CLICK ( no time effect, only click ) the same link, the one that faded in ( div2 ) should BE replaced with the one that faded out before ( using the same effect ). I made this possible as well, but my problem is that the div2 come back.
Maybe this is something really easy for you guys, but I spent more than 5 hours trying to find a solution.
Here's my code:
<script type="text/javascript" src="js/jquery-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a#test2').click(function() {
$('.content').fadeIn('slow');
return false;
});
$('a#test2').click(function() {
$('.content2').fadeOut('slow');
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.content2').hide();
$('a.test').click(function() {
$('.content2').fadeIn('slow');
return false;
});
$('a.test').click(function() {
$('.content').fadeOut('slow');
$('a.test').removeClass('test');
return false;
});
});
</script>
And here's my HTML:
<body>

<div id="container">

<div class="content">

<img src="img/img1.jpg" alt="" title="" />

</div>

<div class="content2">

<img src="img/img2" alt="" title="" />

</div>

<div class="bottle">

<a href="#" id="test2" class="test"><img src="img/linkforimage.jpg" alt="" title="" /></a>

</div>

</div>

</body>
Please help me if it's possible. Hopefully you got my point on how this script should behave.

Thank you!