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-f-a:visible") that are visible.

$(document).ready(function(){

  // FAQ Q1
  $(".faq-q1").click(function(){
    $("#faq-f-a:visible").not(this).slideUp();
    $(".faq-a1").slideToggle(500);
  });

  // FAQ Q2
  $(".faq-q2").click(function(){
    $("#faq-f-a:visible").not(this).slideUp();
    $(".faq-a2").slideToggle(500);
  });

// FAQ Q3
  $(".faq-q3").click(function(){
    $("#faq-f-a: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-f-a {
  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-f-q" class="faq-q1">
    <span id="faq-f-txt">(1) This is a Question</span>

    <div id="faq-f-a" 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-f-q" class="faq-q2">
    <span id="faq-f-txt">(2) This is a Question</span>

    <div id="faq-f-a" 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-f-q" class="faq-q3">
    <span id="faq-f-txt">(3) This is a Question</span>

    <div id="faq-f-a" 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

I would expect this - I changed most IDs to class.

You actually do not even need the IDs anymore

$(document).ready(function() {
  $(".faq-q").click(function() {
    const $ans = $(this).closest(".faq-f-wrap").find(".faq-a")
    $(".faq-a:visible").not($ans).slideUp();
    $ans.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-a {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FAQ 01 -->
<div class="faq-f-wrap">
  <div id="faq-f-q1" class="faq-q">
    <span id="faq-f-id1">1</span>
    <span id="faq-f-txt1">This is a Question</span>

    <div id="faq-f-a1" class="faq-a">
      <span id="faq-f-ans1">This is an answer!</span>
    </div>
  </div>
</div>


<!-- FAQ 02 -->
<div class="faq-f-wrap">
  <div id="faq-f-q2" class="faq-q">
    <span id="faq-f-id2">2</span>
    <span id="faq-f-txt2">This is a Question</span>

    <div id="faq-f-a2" class="faq-a">
      <span id="faq-f-ans2">This is an answer!</span>
    </div>
  </div>
</div>

<!-- FAQ 03 -->
<div class="faq-f-wrap">
  <div id="faq-f-q" class="faq-q">
    <span id="faq-f-id3">3</span>
    <span id="faq-f-txt3">This is a Question</span>

    <div id="faq-f-a3" class="faq-a">
      <span id="faq-f-ans3">This is an answer!</span>
    </div>
  </div>
</div>