Jump to content
SF23103

Toggling three divs

Recommended Posts

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>

post-112825-0-62334300-1497539435_thumb.jpg

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.