CODEWITHSUNDEEP
jqueryhtmlcss
MGDTech
MGDTech

Reputation: 552

jQuery click function to increase opacity

I'm trying to get the div "bio-button" class to both open a div of hidden text and decrease its own opacity. And then when the div of text is closed it returns to its previous state

If you look at this fiddle demo, the effect I want is the same as when you click on the image.

But I seem to be running into problems with too many functions being called, perhaps. How can I achieve this more efficiently?

jquery:

$('.bio-button').on('click', function () {
$(this).parent('img').css({opacity:1});
});

This is my html:

<div id="" class="team-member">
<div class="team-text">
    <p>hello this is Billy's text</p>
    <div class="close"></div>
</div><!-- .team-text -->
<div class="team-photo">
    <img width="437" height="293" src="http://www.mgrear.com/clients/gls/wp-content/uploads/2013/02/billy.jpg" class="" alt="billy" />                          
    <h2>Billy Senecal</h2>
    <p>Producer / Director</p>
</div><!-- .team-photo -->
<div class="bio-button">BIO</div>   
<div class="clear"></div>
</div><!-- #team-member -->
<div id="" class="team-member">
<div class="team-text">
    <p>THis is Mark's text</p>
    <div class="close"></div>
</div><!-- .team-text -->
<div class="team-photo">
    <img width="439" height="293" src="http://www.mgrear.com/clients/gls/wp-content/uploads/2013/02/mark.jpg" class="" alt="mark" />                            
    <h2>Mark Montalto</h2>
    <p>Editor / Producer</p>
</div><!-- .team-photo -->
<div class="bio-button">BIO</div>   
<div class="clear"></div>

Upvotes: 1

Views: 586

Answers (1)

zxqx
zxqx

Reputation: 5215

Try this instead:

$('.bio-button').on('click', function () {
  $(this).prev('.team-photo').children('img').css({opacity:1});
});

To break it down:

When the .bio-button is clicked, look at the preceding adjacent sibling that has a class of team-photo, then get the img element that is a child of that team-photo element, then make the specified CSS adjustments to the img element.

In the example above, $(this) refers to the element that was clicked: $('.bio-button').

Upvotes: 1

Related Questions