Hide/Show two classes

Here is the site - http://magnixsolutions.com/dev/jquery/360_new.html

I want to build this step by step to get it right to avoid confusion and Im new in jQuery. Please bear with me.

1.) First, it shows the draggable 360 images (plugin) in the placeholder that works OK when it loads first thing

2.) If I click the "360" navigational image (or hyperlink) underneath the placeholder, it seems to be working OK

3.) If I click the "Call-out" navigational image (or hyperlink) underneath the placeholder, it shows "Call-outs goes here!" works OK.

PROBLEM: When the "Call-outs goes here!" shows up and If I click on the 360 image or hyperlink, it doesnt show the 360 draggable images in the placeholder. I dont know w开发者_运维知识库hat I did wrong in the customized scripts I did. You can look at the source-codes to see what I did wrong.

Appreciate it!

Thanks!

---

A few things here.

$('#PIC360').html('Call-outs goes here!'); will wipe out all other HTML in #PIC360. This means your image is gone. As far as I can tell, you never put it back. You probably want to instead hide the image so it can be re-shown later. Something like :

<div id="PIC360">
    <img id="image" src="01.png" border="0" width="360" height="425"/>
    <span id="theText">Call-outs goes here!</span>
</div>

with #theText initially hidden. Then your code changes to:

$(".callout").click(function() {
    $('#PIC360').hide();
    $("#image").hide();
    $("#theText").show();
    $('#PIC360').fadeIn('slow');
    return false;
});

$(".360").click(function() {
    $('#PIC360').hide();
    $("#image").show();
    $("#theText").hide();
    $('#PIC360').fadeIn('slow');
    return false;
});

And finally, I'm not sure what your intent was with $('#PIC360').css('.360'); but this is entirely invalid.