Triggering click function only on specific element

Question

I have a grid of team members that are all built in figures with figcaptions. I want to trigger the click function for only the one that has been clicked currently it applies the click function to all the figures.

HTML ex:)

<section class="l-team-grid clearfix">
<h2>OUR TEAM</h2>
<figure class="team-items">
<img src="../images/employee-one.jpg" alt="">
<hr>
<figcaption>
    <h3 class="team-member-name">John Doe</h3>
    <p>John is a college graduate he loves milk cookies and broccoli. He is 25 years old and loves architecture.</p>
</figcaption>
<hr>
</figure>
<figure class="team-items">
<img src="../images/employee-one.jpg" alt="">
<hr>
<figcaption>
    <h3 class="team-member-name">John Doe</h3>
    <p>John is a college graduate he loves milk cookies and broccoli. He is 25 years old and loves architecture.</p>
</figcaption>
<hr>
</figure>
<figure class="team-items">
<img src="../images/employee-one.jpg" alt="">
<hr>
<figcaption>
    <h3 class="team-member-name">John Doe</h3>
    <p>John is a college graduate he loves milk cookies and broccoli. He is 25 years old and loves architecture.</p>
</figcaption>
<hr>
</figure>

current Jquery I have for click function

 $('.team-items p').fadeOut(10);


 $('.team-member-name').click(function(){

 $('.team-member-name + p').toggle(700);

 });

I know why the selector is wrong and triggering all the p's to show but just cant figure out the selector to trigger the event only on the adjacent paragraph of the clicked h3. Possible something to do with this?

Thanks

Ende Neu · Accepted Answer · 2014-08-05 21:52:15Z

1

You can use siblings:

$('.team-member-name').click(function(){
  $(this).siblings("p").toggle(700);
});

siblings will return the element next to this which is the clicked element.

answered Aug 5, 2014 at 21:52

Ende Neu

15.8k5 gold badges61 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Samsquanch · Accepted Answer · 2014-08-05 21:52:18Z

0

Try using next():

$('.team-items p').fadeOut(10);
$('.team-member-name').click(function(){
    $(this).next('p').toggle(700);
});

Fiddle.

answered Aug 5, 2014 at 21:52

Samsquanch

9,17612 gold badges55 silver badges90 bronze badges

Comments

Sushanth -- · Accepted Answer · 2014-08-05 21:54:23Z

0

Use this as the context to only target the p inside the clicked item.

Then use the next selector to display the figCaption for the corresponding clicked element

$('.team-items p').fadeOut(10);

$('.team-member-name').click(function(){
   $(this).next('.figcaption').toggle(700);
});

answered Aug 5, 2014 at 21:54

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

Patriotec · Accepted Answer · 2014-08-05 22:24:49Z

0

I'd just use the figcaption element. This will also unbind the click.

$('figcaption p').fadeOut(10);

$(document).off('click','figcaption').on('click', 'figcaption', function() {
   $(this).find('p').toggle(700);
}):

answered Aug 5, 2014 at 22:24

Patriotec

1,1544 gold badges23 silver badges43 bronze badges

Collectives™ on Stack Overflow

Triggering click function only on specific element

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related