jQuery addClass example

Change class name on click in jQuery

by joplomacedo

HTML

<div class="faq">
  <div class="question">Question 1</div>
  <div class="answer">Answer 1</div>
  <div class="question">Question 2</div>
  <div class="answer">Answer 2</div>
  <div class="question">Question 3</div>
  <div class="answer">Answer 3</div>
</div>

CSS

.question {
  padding: 20px 5px;
  box-sizing: border-box;
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #dddddd;
  display: flex;
  align-items: center;
}

.question:before {
  content: "+";
  color: #008aff;
  margin-right: 10px;
  font-size: 20px;
}

.question.active:before {
  content: '-';
  margin-right: 13.86px;
}

.answer {
  display: none;
  padding: 20px;
  line-height: 1.7;
}

JavaScript

var $open_q;

function close( $q ) {
	$q.removeClass('active');
	$q.next.slideUp();
}

function open( $q ) {
	$q.addClass('active');
  $q.next().slideDown();
}


// Change +/-
$(".question").click(function() {
	var $q = $(this);
	
	if ( $open_q )
	
	if ( !$q.hasClass('active') ) {
		$q.addClass('active');
    $a.slideDown();
		
	} else {
		$q.removeClass('active');
    $a.slideUp();
	}
	
});