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