CODEWITHSUNDEEP
jqueryhtmlcss
MGDTech
MGDTech

Reputation: 542

jQuery hide show element logic

I have a list of images that I want to have text appear next to them when they are clicked on. I have set the opacity of the image as 0.5 in the default state and when a user hovers over the image, the opacity goes to full or 1.

Now I want the opacity of the image to be at 1 as long as the text box is open.

You can get a better idea by viewing this fiddle link.

I have tried this for my javascript but its not working:

$('.team-text .close').click(function () {
    $(this).parent('.team-text').hide();
});


$('.team-member .team-photo, .team-member .bio-button, .team-member-minor .team-photo, .team-member-minor .bio-button').on('click', function(){
  $(this).find('.team-text:visible').hide();
  $(this).find('.team-member img, .team-member-minor img').css('opacity','0.5');
});

$('.team-photo, .bio-button').on('click', function () {
   $('.team-text').hide();
   $(this).prevAll('.team-text:hidden').show();
   $(this).prevAll('.team-member img, .team-member-minor img').css('opacity','1');
});

Upvotes: 0

Views: 249

Answers (2)

Nick Tomlin
Nick Tomlin

Reputation: 29271

Apply a css class (e.g. active) to the .team-member div on your "active" state, that way you don't have to manually set the opacity for each item. This also makes things cleaner and more maintainable for the future.

EDIT: I've changed the class names per @Alexander's suggestion below. http://jsfiddle.net/Lh6xU/ Here's his fiddle

css

.team-member-minor img {
 opacity:.5; /* the default state for images; no need for jQuery */
}
.team-text {
display:none; 
}
/* "active" class */
.team-member-minor.active img {
opacity:1;
}

.active .team-text {
display:inline;
}

JS

$('.team-member-minor').on('click', function(){
     $(this)
      .addClass('active')
      .siblings('.team-member-minor')
      .removeClass('active');
}

// if a user "closes" the textbox, reset our team member

$('.team-text .close').click(function () {
   $(this).parent('.team-text').removeClass('active');
});

Upvotes: 2

PlantTheIdea
PlantTheIdea

Reputation: 16369

You can add the following to the .on('click') piece for .team-photo,.bio-button:

$('img').removeAttr('style');
$(this).find('img').css({opacity:1});

This removes any style tag on the existing images (added by changing their opacity), and then setting the opacity of the clicked img to 1.

To reset the opacity on closing the text portion, just removeAttr('style'); on the click of .close:

$('img').removeAttr('style');

I think this is what you want. I also updated your jsFiddle.

Upvotes: 1

Related Questions