在常见问题解答中单击的元素的 toggleClass 图标

Question

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 class="faq"> <div class="question faqplus">Question</div> <div class="answer">Answer</div> </div> <div class="faq"> <div class="question faqplus">Question</div> <div class="answer">Answer</div> </div> <div class="faq"> <div class="question faqplus">Question</div> <div class="answer">Answer</div> </div>

Answer 1

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 class="faq"> <div class="question faqplus">Question</div> <div class="answer">Answer</div> </div> <div class="faq"> <div class="question faqplus">Question</div> <div class="answer">Answer</div> </div> <div class="faq"> <div class="question faqplus">Question</div> <div class="answer">Answer</div> </div>

Answer 2

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 class="faq"> <div class="question faqplus">Question</div> <div class="answer">Answer</div> </div> <div class="faq"> <div class="question faqplus">Question</div> <div class="answer">Answer</div> </div> <div class="faq"> <div class="question faqplus">Question</div> <div class="answer">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 class="faq"> <div class="question faqplus">Question</div> <div class="answer">Answer</div> </div> <div class="faq"> <div class="question faqplus">Question</div> <div class="answer">Answer</div> </div> <div class="faq"> <div class="question faqplus">Question</div> <div class="answer">Answer</div> </div>

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