Question

I have three divs. I have a main div that presents the user an option of choosing to view the two other divs. It works okay if I use just text and do not hide the original div. But I want to use an image map and have the main div hide then if the user chooses they can click a back button and have the div re-appear and the one they are viewing fade out. I have it partly worked out but need help finishing the script so it works properly as JS is not my strong suit. Here is the code:

JS

// I am using jQuery Version 1.7.2

var $j = jQuery.noConflict();

//Script for Choosing which form to display
$j("#transformed-link, #changed-link").live('click',
 function(){  

    //figure out what button was clicked. 
    if(this.id === "transformed-link"){
        var btnA = $j(this);
        var btnB = $j("#changed-link");
        var divA = $j('#transformed-aviation');
        var divB = $j('#changed-aviation');
    }
    else{
        btnA = $j(this);
        btnB = $j("#transformed-link");
        divA = $j('#changed-aviation');
        divB = $j('#transformed-aviation');
    }

    //make sure it is not already active, no use to show/hide when it is already set
    if(btnA.hasClass('active')){
        return; 
    }

    //see if div is visible, if so hide, than show first div
    if(divB.is(":visible")){        
        divB.fadeOut("slow", function(){
             divA.fadeIn("slow");
        });
    }
    else{//if already hidden, just show the first div
        divA.fadeIn("slow"); 

         //Add and remove classes to the buttons to switch state
    btnA.addClass('active').removeClass('inactive ');
    btnB.removeClass('active').addClass('inactive ');

    }
}    

);

HTML

<div id="nav-main">
<!-- This is the original main div that users will choose which div to show. -->
<img src="nav-main.jpg" width="940" height="400" usemap="#Map" border="0" />
<map name="Map" id="Map">
  <area shape="rect" coords="52,146,420,258" href="#transformed-link" class="inactive" />
  <area shape="rect" coords="536,145,876,267" href="#changed-link" class="inactive"  />
</map>
</div>

<div id="transformed-aviation" class="hide">
<!-- CONTENT OF DIV -->
Link to return to main div? 
</div>

<div id="changed-aviation" class="hide">
<!-- CONTENT OF DIV -->
Link to return to main div? 
</div>

CSS

/* Majority of the CSS is only page specific. nav-main, transformed-aviation, changed-aviation are just identifiers for JS and have no code assigned to them. */

.hide{ display:none; }

My question comes down to this:

How do you fade out the original div and have it fade in the one that the user choose. Then with a link allows an user to go back to the main div (thus fading out the current div and fading in the main or original div).

Feel free to modify or completely rewrite the original script. But please provide examples as I had help with this script and do not know enough JS to write it by myself.

Thanks!

Answer 1

Think you want a back control for two divs to main div and a select div option in main div.

Here is a working Live Demo.

You can use ANYTHING in your divs and not just images. I have completely changed your JavaScript. Comment if you want any more help.