Remove class of another element with jQuery when clicking element

Question

I am having an issue with my code.

Currently the .active class is being applied when I click on divs that read ebook image 1, ebook image 2, ebook image 3, as intended.

What I would like to do is to remove the .active class when I click the div itself, which it is not currently doing.

https://fiddle.jshell.net/aerandur/v20hmy3b/

$(document).ready(function() {
  $('.one').on('click', function() {
    $('.one').removeClass('active');
    $id = "#" + $(this).addClass('active').attr('data-id');
    $('.two:not(' + $id + ')').hide();
    $($id).slideToggle();
  });
});

/* .container {
  margin: 0 auto;
}

.frame {
  max-width: 940px;
  margin: 0 auto;
}
 */
.one {
  top: 0;
  background-color: lightblue;
  z-index: 1;
  padding: 25px 10px;
  width: 30%;
  min-width: 200px;
  display: inline-block;
  cursor: pointer;
}

.two {
  background-color: yellow;
  z-index: -1;
  display: none;
}

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whatever-you-wanna-name top-product-list-ebbok">
  <div class="frame">
    <div class="c-3 one" data-id="p1">ebook image 1</div>
    <div class="c-3 one" data-id="p2">ebook image 2</div>
    <div class="c-3 one" data-id="p3">ebook image 3</div>
  </div>
</div>
<div class="whatever-you-wanna-name top-product-list-description">
  <div class="frame">
    <div class="two" id="p1">ebook for content image 1</div>
    <div class="two" id="p2">ebook for content image 2</div>
    <div class="two" id="p3">ebook for content image 3</div>
  </div>
</div>

Answer 1

Shortest option, as far as I can tell. Refine the selector by using .not(this), and then toggle the class on the element itself.

$(document).ready(function() {
  $('.one').on('click', function() {
    $('.one').not(this).removeClass('active');
    $id = "#" + $(this).toggleClass('active').attr('data-id');
    $('.two:not(' + $id + ')').hide();
    $($id).slideToggle();
  });
});

https://fiddle.jshell.net/v20hmy3b/10/