Can someone show me how toggle might work with this

JavaScript
1

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:


<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:


           #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:


                $("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

2

HI cliff

I’m not sure about jquery, but you could try javascript’s onclick="toggle_visibility(‘pics’);

3

Thanks 2ndmouse. I really want to do this with jQuery (then I don’t have to worry too much about browser problems). But your answer has given me enough of a hint to have another look at how jQuery toggle works and reference the pics div.