$eventTarget.is($(this)) not working

Question

I made a sample accordion. If a tab is being clicked, its siblings are supposed to be closing; in other words, only one tab must be opened if the event target is that current tab (the tabs are the <header>s). What I did in my code is test if the event target is the current tab, which is $(this), but it didn't work, nothing changed. How can I fix this?

var $header = $('#accordions').find('header');

$header.on('click', function(e) {
  var $eventTarget = $(e.target);

  if (!$eventTarget.is($(this))) {
    $(this).siblings('.slide').slideUp(300);
  } else {
    $(this).siblings('.slide').slideToggle(300);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="accordions">
  <div class="accordion">
    <header>Slide 1</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 2</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 3</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 4</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</section>

score 1 · Accepted Answer · answered Dec 30 '16 at 12:37

You can fix your code and make it more succinct by simply retrieving the .slide element that is related to the clicked header and calling slideToggle() on it, then calling slideUp() on all the remaining .slide elements. Try this:

$('#accordions header').on('click', function(e) {
  var $target = $(this).next('.slide').slideToggle(300);
  $('.slide').not($target).slideUp(300);
});

header { font-weight: bold; }
.slide { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="accordions">
  <div class="accordion">
    <header>Slide 1</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 2</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 3</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 4</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</section>

$eventTarget.is($(this)) not working

1 Answers1