Simple but tricky Show/Hide Toggle On/Off Combinations driving me bonkers

Question

Have a few divs that need to show/hide and the buttons within need to know when it's on and when it's off. Somehow they need to "communicate with another" to know when to be hidden or visible. Oh yeah, I'd like to keep the smooth fadein/fadeout effect on all elements.

Thanks!!

My fiddle is here: http://jsfiddle.net/Pe9jn/

Here's the code I've got that mostly works, but it's a bit quirky:

//hide maximize link on page load
$('.maximize_menu').css('display','none');


  //settings
  var opacity = 1, toOpacity = 0, duration = 350;
  //set opacity ASAP and events

$('.toggle_all, .toggle_all2').css('opacity',opacity).toggle(function() {
      $('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,toOpacity);
    }, function() {
      $('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,opacity);
    }                                         
  );

// this minimizes the menu and should make the mazimize_menu link visible when toggled off
$('.minimize_menu').css('opacity',opacity).toggle(function() {
      $('#menu, .minimize_menu,.maximize_menu').fadeTo(duration,toOpacity);
    }, function() {
      $('.maximize_menu, #menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
        $('.maximize_menu').show(duration,toOpacity);
        $('.maximize_menu').css('display','block');
    }                                                    
  );


// this maximizes the menu and should disappear once the menu is visible
$('.maximize_menu').css('opacity',opacity).toggle(function() {
      $('#menu, .minimize_menu,').fadeTo(duration,toOpacity);
    }, function() {
      $('#menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);

    }                                                   
  );

Have you looked at the JQuery "data" function? Might be a good way to keep track of what's hidden and what isn't. — McGarnagle, Apr 20 '12 at 08:44
I have no experience with that and may be above my skill level. — user433575, Apr 20 '12 at 09:07

score 1 · Answer 1 · answered Apr 20 '12 at 08:42

1

I think that you should rethink all the logic, because you are not actually hiding the elements, you are just setting the opacity to 0. What you should really use is fadeOut() and fadeIn()

answered Apr 20 '12 at 08:42

Nicola Peluchetti

76,206
31
145
192

Gotcha thanks I'll try that, but it still won't solve my toggle boggle ;) – user433575 Apr 20 '12 at 09:10

Simple but tricky Show/Hide Toggle On/Off Combinations driving me bonkers

1 Answers1