CODEWITHSUNDEEP
javascriptjquery
Philipl
Philipl

Reputation: 415

Jquery slideToggle can't work with $(this).find

I want to select children '.comment' element slideToggle it every time I click '.item' element. html code:

<div class="row col-md-12 item">
  <div class="col-md-4">Name</div>
  <div class="col-md-4">degree of usage</div>
  <div class="col-md-4">price</div>
  <div class="col-md-12 comment">comment</div>
</div>

Js code

$('.item').on('click', (event) => {
  $('.item > .comment').slideUp(200);
  $(this).find('.comment').slideToggle(200);
});

It seems that slideUp effects can work normally, but $(this).find can't catch the '.comment' element inside it.

Upvotes: 2

Views: 230

Answers (3)

LegoBoy
LegoBoy

Reputation: 140

Try to:

$('.item > .comment').slideUp(200);
$('.item').on('click', function(e) {
  $(this).find('.comment').slideToggle(200);
});

Hope this Help

Upvotes: 0

Derek Nolan
Derek Nolan

Reputation: 744

You just need to put in a function into your js code. I also just commented out the slideUp as the slideToggle function will override it. See below:

 $('#item').on('click', function(event) {
   //$('.item > .comment').slideUp(200);
   $(this).find('.comment').slideToggle(200);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row col-md-12 item" id="item">
      <div class="col-md-4">Name</div>
      <div class="col-md-4">degree of usage</div>
      <div class="col-md-4">price</div>
      <div class="col-md-12 comment">comment</div>
    </div>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337666

The issue is because you're using an arrow function, hence the context of this is in the outer scope still, not the .item element that raised the event. Use a traditional function instead if you want this behaviour:

$('.item').on('click', function(e) {
  $('.item > .comment').slideUp(200);
  $(this).find('.comment').slideToggle(200);
});

Upvotes: 7

Related Questions