(Drupal) How to only target elements within node with jQuery?

Question

I'm a beginner with jQuery and I have this HTML:

<a class="a2a_dd" href="https://www.addtoany.com/share_save"><img src="//static.addtoany.com/buttons/favicon.png" width="0" height="0" border="0" alt="Share"/>Share</a>

<div id="share-btns">
 <div id="facebook">
  <a class="a2a_button_facebook"></a>
 </div>

 <div id="google_plus">
  <a class="a2a_button_google_plus"></a>
 </div>

 <a class="a2a_button_twitter">
  <div id="twitter"></div>
 </a>
</div>

I am trying to use jQuery to make it so when you click on the .a2a_dd link, it will toggle the #share-btns div visibility. Here is my code:

(function($){
Drupal.behaviors.toggle = {
  attach: function() {
    $('.a2a_dd').click(function() {
      $('#share-btns').fadeToggle();
    });
  }
};

})(jQuery);

The problem is, I have a grid of teaser articles all on the same page that all have this HTML on them and when I click on the .a2a_dd link on any of the teasers it toggles the #share-btns div on only the first teaser on the page. Is there a way to get jQuery to recognize the node that was clicked on so it can toggle the div from that same node? Any help would be greatly appreciated.

is there another wrapping element for each group of buttons and link? That would help isolate the instances — charlietfl
I'm sorry yes there is, it's a span element with class .a2a_kit — 5AM
OK. Then use the pattern $(this).closest('.a2a_ki').find('[id=share-btns]'). It looks up to that parent wrapper and then isolates within it. ID's are not supposed to repeat in a page thus the [id=..] selector — charlietfl

Muhammad Reda Muhammad Reda · Accepted Answer · 2015-01-11T12:03:11

A quick fix using next(). You need to target the element right after the toggle link (according to your html structure).

$('.a2a_dd').click(function() {
  $(this).next().fadeToggle();
});

Plunker example.

(Drupal) How to only target elements within node with jQuery?

1 Answers