Toggling three divs

[SF23103]

What I'm doing:  I have three DIVs, each of them acting as a button to swap one div with different content.

 

[bOX_1] [bOX_2] [bOX_3]

[--------BOX_4------------]

 

For instance:

If you click BOX_1, it swaps BOX_4 out with BOX_1_CONTENT & (Clicking BOX_1 again returns it to BOX_4)

If you click BOX_2, it swaps BOX_4 out with BOX_2_CONTENT & (Clicking BOX_2 again returns it to BOX_4)

If you click BOX_3, it swaps BOX_4 out with BOX_3_CONTENT & (Clicking BOX_3 again returns it to BOX_4)

 

BOX_1_CONTENT, BOX_2_CONTENT, and BOX_3_CONTENT are all set to display:none; and appear after clicking.

 

What Works:

It works great if you are only toggling back and forth (i.e. toggling content by clicking the BOX_1 back and forth).

 

My problem:

I am having trouble dealing with Clicking BOX_1 and then before toggling back, clicking BOX_2 or BOX_3.

 

It seems I need a way to deal with scenarios such as:  Click BOX_1 (swapping BOX_4 with BOX_1_CONTENT) and then immediately clicking BOX_3 and having it swap BOX_1_CONTENT with with BOX_3_CONTENT.

 

 

 

Any suggestions on a better way to do this?

<script>
$(document).ready(function(){
    $(".BOX_1").click(function()
    {        
        $('.BOX_4, .BOX_1_CONTENT').fadeToggle("slow");
    });
    
        $(".BOX_2").click(function()
    {        
        $('.BOX_4, .BOX_2_CONTENT').fadeToggle("slow");
    });

        $(".BOX_3").click(function()
    {        
        $('.BOX_4, .BOX_3_CONTENT').fadeToggle("slow");
    });

});
</script>

[SF23103]

Got it figured out!

 

https://jsfiddle.net/8u1wxw01/1/