Minor issue with jQuery function

[fig]

Hey guys, been working on a jQuery code blurb that's a very simple show/hide system and I could use a bit of help. Clicking a button on the menu shows the graphic associated with that menu item while hiding the one previously visible. Example is here.

The code is pretty simple in general, here's the exciting part:

$(document).ready(function(){

$(".image01").show();
$(".showhide_image01").show();

$('.showhide_image01').click(function(){
$(".image01").fadeToggle();
$(".image02").hide();
$(".image03").hide();
$(".image04").hide();
$(".image05").hide();
});


$(".image02").hide();
$(".showhide_image02").show();

$('.showhide_image02').click(function(){
$(".image02").fadeToggle();
$(".image01").hide();
$(".image03").hide();
$(".image04").hide();
$(".image05").hide();
});

And then repeated for each image, showing and hiding the appropriate sections.

The issue I'm having is that if a button is clicked to show an image and then clicked again before another menu item is clicked, it hides that image without showing another.

Any suggestions on how to manage that second click so that the image isn't hidden? Thanks.

[jsm4182]

For each click function you could add an if statement to check the display of the image and if it's display:none then perform the fade and hides. Something like:

$('.showhide_image01').click(function(){
   if( $(".image01").css("display") == "none" ){
      $(".image01").fadeToggle();
      $(".image02").hide();
      $(".image03").hide();
      $(".image04").hide();
      $(".image05").hide();
   }
});

[fig]

Awesome, I'll try that out. Thanks!

[Dunmail]

Assuming that all the buttons will be children of a common ancestor, I'd look at event delegation and have a single handler attached to the ancestor. The handler would hide all the images then show the targeted image.

Some rough code:

var imgs = $('parent > img');
  imgs.hide().filter(':first').show();
                        
  $('div.buttons a').click(function () {
    imgs.hide();
    imgs.filter(this.hash).show();
    $('div.buttons a').removeClass('selected');
    $(this).addClass('selected');
    return false;
  }).filter(':first').click();

The above is a quick edit of some tab selection code I use, you'll need to change 'parent' to something more useful and correct but it won't be too far out.

[fig]

That's a bit more involved then I was planning to get at this point (and I do realize my code could be much more efficient) but I'll dig more into that when I have time.

Appreciate the advice, thanks!

[iPaintCode]

Hey fig,

A little example I whipped up, hope it helps you out. I used CSS3 transition for the fading but you could easily swap it out for a jQuery animate if you need an IE<9 fix.

http://codepen.io/ipaintcode/pen/CDjku

If you have any questions feel free =)

[fig]

Originally Posted by iPaintCode

Hey fig,

A little example I whipped up, hope it helps you out. I used CSS3 transition for the fading but you could easily swap it out for a jQuery animate if you need an IE<9 fix.

http://codepen.io/ipaintcode/pen/CDjku

If you have any questions feel free =)

That is absolutely awesome, thanks. Only catch is I do need to do it in jQuery and not CSS3, the company I work for deals primarily with corporate clients who are often stuck on older browsers/computer illiterate.

I'll dig into this a bit and see if I can follow what's going on, greatly appreciate it!

[iPaintCode]

Hey Fig,

Swapped it over to non CSS3 transition. It's fully functional but was more or less pseudo code but demonstrates what you need.

http://codepen.io/ipaintcode/pen/CDjku

[fig]

Brilliant. Thanks, greatly appreciate it!