toggleClass icon of element clicked on in a faq-CodePudding

I am trying to switch the icon of the question once I click on it, I almost got it to work, the icon switches when you click on a question and switches back when you click on the same question again.

It goes wrong when you click on a question and then on another question. The first question you clicked on is automatically closing but the icon doesn't switch back.

$('.answer').hide();

$('.question').click(function(){
   
    var $this = $(this).parent().find('.answer');
    $(".answer").not($this).hide();
    $this.toggle();
    
    $(this).toggleClass('faqmin')
  
});

* {
  border:0;
  padding:0;
  margin:0;
}

.faq {
  width: 100%;
  padding:10px 0 10px 0;
  border:0;
  border-bottom: 1px solid #e0e0e0;
  outline: none;
  cursor: pointer;
}

.faqplus:after {
  float: right;
  margin-left: 5px;
  content: '\002B';
  font-size:18px;
  color: black;
}

.faqmin:after  {
  content: "\2212";
}

.answer {
  margin-top:10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >Question</div>
  <div >Answer</div>
</div>

<div >
  <div >Question</div>
  <div >Answer</div>
</div>

<div >
  <div >Question</div>
  <div >Answer</div>
</div>

CodePudding user response：

You need to toggle the plus/minus in the other question yourself:

$(".faqmin").not(this).toggleClass('faqmin')

Note using $this to mean something other than $(this) can be highly confusing, so I've changed that variable in the snippet below.

$('.answer').hide();

$('.question').click(function(){
   
    var thisans = $(this).parent().find('.answer');
    $(".answer").not(thisans).hide();    
    $(".faqmin").not(this).toggleClass('faqmin')

    thisans.toggle();
    $(this).toggleClass('faqmin')  
});

* {
  border:0;
  padding:0;
  margin:0;
}

.faq {
  width: 100%;
  padding:10px 0 10px 0;
  border:0;
  border-bottom: 1px solid #e0e0e0;
  outline: none;
  cursor: pointer;
}

.faqplus:after {
  float: right;
  margin-left: 5px;
  content: '\002B';
  font-size:18px;
  color: black;
}

.faqmin:after  {
  content: "\2212";
}

.answer {
  margin-top:10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >Question</div>
  <div >Answer</div>
</div>

<div >
  <div >Question</div>
  <div >Answer</div>
</div>

<div >
  <div >Question</div>
  <div >Answer</div>
</div>

Note: given your html setup, you can toggle the answer with css

$('.question').click(function(){
    $(".faqmin").not(this).removeClass('faqmin');
    $(this).toggleClass('faqmin');
});

* {
  border:0;
  padding:0;
  margin:0;
}

.faq {
  width: 100%;
  padding:10px 0 10px 0;
  border:0;
  border-bottom: 1px solid #e0e0e0;
  outline: none;
  cursor: pointer;
}

.faqplus:after {
  float: right;
  margin-left: 5px;
  content: '\002B';
  font-size:18px;
  color: black;
}

.faqmin:after  {
  content: "\2212";
}

.answer {
  margin-top:10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display:none;
}
.faqmin   .answer {
  display:block;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >Question</div>
  <div >Answer</div>
</div>

<div >
  <div >Question</div>
  <div >Answer</div>
</div>

<div >
  <div >Question</div>
  <div >Answer</div>
</div>

and if you add a styled checkbox, you don't need any js at all, leave that one to you.

CodePudding user response：

When user click, you need to reset class of all questions.

https://api.jquery.com/attr/

$('.answer').hide();

$('.question').click(function(){
    $('.question').attr('class', 'question faqplus'); // here
    var $this = $(this).parent().find('.answer');
    $(".answer").not($this).hide();
    $this.toggle();
    
    $(this).toggleClass('faqmin')
  
});

* {
  border:0;
  padding:0;
  margin:0;
}

.faq {
  width: 100%;
  padding:10px 0 10px 0;
  border:0;
  border-bottom: 1px solid #e0e0e0;
  outline: none;
  cursor: pointer;
}

.faqplus:after {
  float: right;
  margin-left: 5px;
  content: '\002B';
  font-size:18px;
  color: black;
}

.faqmin:after  {
  content: "\2212";
}

.answer {
  margin-top:10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >Question</div>
  <div >Answer</div>
</div>

<div >
  <div >Question</div>
  <div >Answer</div>
</div>

<div >
  <div >Question</div>
  <div >Answer</div>
</div>