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>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>