jquery slide toggle - affects all on the page

Question

I have a view with a list of a content type and using drupal behaviors and jquery toggle, I trying to toggle some content when the user clicks a div. The only problem is that it's affecting all the divs and they're all toggling open, I'd just like the one they clicked to open.

Here is my code:

(function ($) {
 Drupal.behaviors.myToggle = {
  attach: function(context, settings) {
  $('.views-row').find('.views-field-field-mp3').hide();

    $('.mp3-toggle', context).click(function() {
     $('.views-field-field-mp3').slideToggle();
    });
  }
 };
})(jQuery);

I've tried return false and a couple of other things, though none seem to work.

Any help would be much appreciated.

Answer 1

You'll need to make use of the this keyword inside your click function:

 Drupal.behaviors.myToggle = {
   attach: function(context, settings) {
     $('.views-row').find('.views-field-field-mp3').hide();

     $('.mp3-toggle', context).click(function() {
       $(this).parents('.views-row').find('.views-field-field-mp3').slideToggle();
     });
   }
 };