Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Minor issue with jQuery function

fig

fig

macrumors 6502a
Original poster
Jun 13, 2012
916
84
Austin, TX
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();
});
Click to expand...

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.
 
J

jsm4182

macrumors 6502
Apr 3, 2006
346
12
Beacon, NY
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:

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

Dunmail

macrumors regular
Mar 27, 2009
224
4
Skipton, UK
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:

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

fig

macrumors 6502a
Original poster
Jun 13, 2012
916
84
Austin, TX
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!
 
fig

fig

macrumors 6502a
Original poster
Jun 13, 2012
916
84
Austin, TX
iPaintCode said:
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 =)
Click to expand...

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!
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom