Hi all

I am just learning jQuery and am having heaps of fun.

Anyway, I have this website which contains two images, one of which is hidden. Each image has an a link referencing the other picture. I have got it working (and I show the relevant parts below), but I am really sure that a toggle function would surely work, but I don't know how to do it.

I would appreciate any help.

Here is the HTML code:
Code:
<div id="pics">
<div id="left"><img src="/images/f50.gif" style="height:150px" />
    <br><span class="smallLink">SAMAP F50</span><img style="padding-top:4px;" src="/images/diamond_brown.gif"><a class="smallLink" href="f100" >SAMAP F100</a>
</div>
<div id="right"><img src="/images/f100.gif" style="height:150px" />
    <br><a class="smallLink" href="f50">SAMAP F50</a><img style="padding-top:4px;" src="/images/diamond_brown.gif"><span class="smallLink">SAMAP F100</span>
</div>
</div>
Here is the css:
Code:
           #pics,#left,#right{
                text-align:center;
                padding-left:3px;
                width: 160px;
                height:150px;
            }
            #pics{
                float: right;
            }
            #left,#right{
                right: 15px;
                top: 5px;
            }
            #right{
                display: none;
            }
and here is my jQuery:
Code:
                $("div#left a").click(function(e) {
                    e.preventDefault();
                    $("div #left").hide();
                    $("div #right").show();
                });
               $("div#right a").click(function(e) {
                    e.preventDefault();
                    $("div #right").hide();
                    $("div #left").show();
                });
There is a document ready function wrapping this, but there is also another jquery function going on, so I haven't shown it.

Any help would be tremendous. As I said, it is working like that, but surely a toggle function would be more efficient.

Thanks in advance