jQuery slideToggle current div and slideUp the rest divs that are visible

Question

I am trying to build a FAQ page where there is a div, on click it should slideToggle another div inside of it for visibility.

Once if it is clicked I want any other divs except this one, that are visible to slideUP.

My code currently works absolutely different from what I would like. I think the issue is with the .slideUp() part to find the other elements ("faq-fa:visible") that are visible.

 $(document).ready(function(){ // FAQ Q1 $(".faq-q1").click(function(){ $("#faq-fa:visible").not(this).slideUp(); $(".faq-a1").slideToggle(500); }); // FAQ Q2 $(".faq-q2").click(function(){ $("#faq-fa:visible").not(this).slideUp(); $(".faq-a2").slideToggle(500); }); // FAQ Q3 $(".faq-q3").click(function(){ $("#faq-fa:visible").not(this).slideUp(); $(".faq-a3").slideToggle(500); }); });

 body { background: #FFF; padding: 50px; font-family: Helvetica; } #faq-f-wrap { padding: 40px; font-size: 25px; text-align: center; margin: 0 auto; width: 300px; cursor: pointer; } #faq-fa { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- FAQ 01 --> <div id="faq-f-wrap"> <div id="faq-fq" class="faq-q1"> <span id="faq-f-txt">(1) This is a Question</span> <div id="faq-fa" class="faq-a1"> <span id="faq-f-ans">This is an answare!</span> </div> </div> </div> <!-- FAQ 02 --> <div id="faq-f-wrap"> <div id="faq-fq" class="faq-q2"> <span id="faq-f-txt">(2) This is a Question</span> <div id="faq-fa" class="faq-a2"> <span id="faq-f-ans">This is an answare!</span> </div> </div> </div> <!-- FAQ 03 --> <div id="faq-f-wrap"> <div id="faq-fq" class="faq-q3"> <span id="faq-f-txt">(3) This is a Question</span> <div id="faq-fa" class="faq-a3"> <span id="faq-f-ans">This is an answare!</span> </div> </div> </div>

JsFiddle Here

Answer 1

You seem to swap ID and class