Select a sibling div element with Jquery

Question

Im trying to select one sibling div element with jquery to apply a slideToggle

I tried targeting the parent element, and then using .find(), also tried with siblings but not sure what im doing wrong.

    <div class="col teachers-container px-0">
        <div class="row py-2 teacher-box m-1 shadowed" >
            <div class="teacher-card col center-block">
            </div>
        </div>
        <div class="teacher-intro row px-lg-0" style="">
          <h6 class="paragraph text-justify pb-3 mx-3 pt-1 pt-lg-2" style="">Intro text.</h6>
        </div>
    </div>

What i would like ideally but not working:

$('.teacher-box').on('click', () => {$(this).parent().children().last().slideToggle()})

This one is Working but all elements with teacher-intro class in other boxes get the slide toggle and i want to target only the one in the current box:

$('.teacher-box').on('click', () => {$('.teacher-intro').slideToggle()})

Thanks for your answer. $(this).closest(".teacher-intro") also doesnt seem to work. nothing really happens when i click. — DA., Aug 06 '19 at 04:16
Possible duplicate of [How do I select a sibling element using jQuery?](https://stackoverflow.com/questions/7463242/how-do-i-select-a-sibling-element-using-jquery) — Oloff Biermann, Aug 06 '19 at 04:25

score 1 · Answer 1 · answered Aug 06 '19 at 04:28

Your first solution will work if you use normal function instead of arrow function:

$('.teacher-box').on('click', function() {
  $(this).parent().children().last().slideToggle()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col teachers-container px-0">
        <div class="row py-2 teacher-box m-1 shadowed" >
            <div class="teacher-card col center-block">1
            </div>
        </div>
        <div class="teacher-intro row px-lg-0" style="">
          <h6 class="paragraph text-justify pb-3 mx-3 pt-1 pt-lg-2" style="">Intro text 1.</h6>
        </div>
    </div>
    <div class="col teachers-container px-0">
        <div class="row py-2 teacher-box m-1 shadowed" >2
            <div class="teacher-card col center-block">
            </div>
        </div>
        <div class="teacher-intro row px-lg-0" style="">
          <h6 class="paragraph text-justify pb-3 mx-3 pt-1 pt-lg-2" style="">Intro text 2.</h6>
        </div>
    </div>

Or there are some other way to do it:

If the .teacher-intro is placed immediately after .teacher-box, you can use $(this).next().slideToggle().

Else if there are some element between them, you can use $(this).nextAll('.teacher-intro').slideToggle().

This works perfect. Thank you so much!. Do you know why is it that arrow function doesnt work in this case? — DA., Aug 06 '19 at 04:32
Because using arrow function doesn't bind `this` to the element clicked. You can find more info here: https://stackoverflow.com/questions/28798330/arrow-functions-and-this and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions — Cuong Le Ngoc, Aug 06 '19 at 04:35

score 0 · Answer 2 · answered Aug 06 '19 at 04:48

You can use below code to toggle a sibling element using jquery, If you want to toggle specific element, then you should go with jquery methods like .next(), .first(), .prev(), .parent(), .parents(),.children() etc.

$(".teacher-box").click(function(){
      $( "div.teacher-box" ).siblings().toggle();
  });

Select a sibling div element with Jquery

2 Answers2