CODEWITHSUNDEEP
javascriptjquery
brunodd
brunodd

Reputation: 2584

jQuery: Animate current div only

How can I animate elements inside current div only? If user clicks on Edit it should animate the current clicked section only and not all divs.

$('.js-edit').click(function() {
  if ($('.other,.hide-content, .show-content').is(':animated')) return;
  // Hide 'Edit link'
  $(this).fadeOut(200);

  // Push down 'other' div
  $('.other').animate({
    'marginTop': "+=400px" //moves down
  });

  // Hide content
  $('.hide-content').delay(200).fadeOut(200);

  // Show hidden content
  $('.show-content').delay(400).fadeIn(200);
});

$(".js-cancel").click(function() {
  if ($('.other,.hide-content, .show-content').is(':animated')) return;
  $('.js-edit').delay(200).fadeIn(200);
  $('.other').delay(200).animate({
    'marginTop': "-=400px" //moves up
  });
  // Show content
  $('.hide-content').delay(200).fadeIn(200);

  // Hide shown content
  $('.show-content').fadeOut(200);
});

jsFiddle

Upvotes: 0

Views: 79

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

you need to use 

$(this).closest('.section').find

for example for $('.hide-content')

$(this).closest('.section').find('.hide-content').....

Upvotes: 1

Related Questions