SF23103 Posted June 15, 2017 Share Posted June 15, 2017 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> Link to comment Share on other sites More sharing options...
SF23103 Posted June 15, 2017 Author Share Posted June 15, 2017 Got it figured out! https://jsfiddle.net/8u1wxw01/1/ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.