jQuery addClass example

Change class name on click in jQuery

by fest1val

HTML

<div class="prjct">
  <div class="prjct__arrow">
  </div>
  <div class="prjct__details">
    Blah blah blah1
  </div>
</div>
<div class="prjct">
  <div class="prjct__arrow">
  </div>
  <div class="prjct__details">
    Blah blah blah2
  </div>
</div>

CSS

.prjct {
  background: #ccc;
  height: 50px;
  margin-bottom: 30px;
}

.prjct__details {
  display: none;
}

JavaScript

$('.prjct').click(function() {
	let self = $(this);
	let details = self.find('.prjct__details');

	if(self.hasClass('active')) {
		self.removeClass('active');
		details.finish().slideUp("fade");
	} else {
		$('.prjct').removeClass('active');
		$('.prjct__details').finish().slideUp("fade");

		self.addClass('active');
		details.finish().slideDown("fade");
	}
});