Как изменить знак «+» на знак «-», когда аккордеон открыт?

Question

Как указано в вопросе, как я могу получить знак "+" для правильного изменения на знак "-", когда ответ на вопрос, на который щелкнули, виден.

В настоящий момент знак «+» меняется на знак «-», когда на вопрос дважды нажимается.

Подводя итог, я просто хочу, чтобы знак "+" был виден при закрытом ответе на вопрос, а знак "-" должен быть виден при открытом ответе на вопрос.

// Change +/-
$(".question").click(function() {
  if ($(this).next().is(":visible")) {
    $(this).addClass("active");
  } else if ($(".question").next().is(":hidden")) {
    $(this).removeClass("active");
  }
});

// FAQ
$(".question").click(function() {
  $(".answer").slideUp();
  if ($(this).next().is(":visible")) {
    $(this).next().slideUp();
  } else {
    $(this).next().slideDown();
  }
});

.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;
  display: block;
  margin-right: 10px;
  font-size: 20px;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 1

У вас есть addClass и removeClass неправильно. Вы также должны применить removeClass ко всем другим вопросам, чтобы гарантировать, что + отображается, когда не отображается.

// Change +/-
$(".question").click(function() {
  if ($(this).next().is(":visible")) {
    $(this).removeClass("active");
  } else if ($(".question").next().is(":hidden")) {
    $('.question').removeClass("active");
    $(this).addClass("active");
  }
});

// FAQ
$(".question").click(function() {
  $(".answer").slideUp();
  if ($(this).next().is(":visible")) {
    $(this).next().slideUp();
  } else {
    $(this).next().slideDown();
  }
});

.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;
  display: block;
  margin-right: 10px;
  font-size: 20px;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

Разделив поведение show / hide и +/- на две отдельные функции, вы вводите дополнительную сложность использования jquery для запуска одного перед другим, и я не знаю, как jquery решает, что запускать первым.

Я предлагаю вам выполнить обе функции в одной и той же функции, чтобы убедиться, что состояние поддерживается правильно.

// Change +/-
$(".question").click(function() {
  $(".answer").slideUp();
  if ($(this).next().is(":visible")) {
    $(this).removeClass("active");
    $(this).next().slideUp();
  } else {
    $(this).addClass("active");
    $(this).next().slideDown();
  }

});

.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;
  display: block;
  margin-right: 10px;
  font-size: 20px;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

Вы должны переключить вызовы addClass и removeClass.

Итак, этот блок:

// Change +/-
$(".question").click(function() {
  if ($(this).next().is(":visible")) {
    $(this).addClass("active");
  } else if ($(".question").next().is(":hidden")) {
    $(this).removeClass("active");
  }
});

должно быть:

// Change +/-
$(".question").click(function() {
  if ($(this).next().is(":visible")) {
    $(this).removeClass("active"); // switched
  } else if ($(".question").next().is(":hidden")) {
    $(this).addClass("active"); // switched
  }
});

Результат:

// Change +/-
$(".question").click(function() {
  if ($(this).next().is(":visible")) {
    $(this).removeClass("active");
  } else if ($(".question").next().is(":hidden")) {
    $(this).addClass("active");
  }
});

// FAQ
$(".question").click(function() {
  $(".answer").slideUp();
  if ($(this).next().is(":visible")) {
    $(this).next().slideUp();
  } else {
    $(this).next().slideDown();
  }
});

.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;
  display: block;
  margin-right: 10px;
  font-size: 20px;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>