Currently working on creating a FAQ page for my website, I ran into a challenge. My goal is to have a setup where clicking on a question will reveal the answer while hiding any previously open answers. So far, I have managed to achieve this functionality partially - when I click on a new question, the previous one hides and the new answer is displayed. However, if I revisit a previously opened question, it does not expand again.
Below is the code snippet I've been using:
$(document).ready(function() {
$("#container li").click(function() {
$("#container p").slideUp();
var text = $(this).children('div.panel');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('-');
} else {
text.slideUp('200');
$(this).children('span').html('+');
}
})
});
#container {
list-style: none;
font-family: arial;
font-size: 20px;
}
#container li {
margin: 10px;
border-bottom: 1px solid #ccc;
position: relative;
cursor: pointer;
}
#container h3 {
margin: 0;
font-size: 24px;
}
#container span {
position: absolute;
right: 5px;
top: 0;
color: #000;
font-size: 18px;
}
#container .panel {
margin: 5px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="container">
<li>
<h3>First Question</h3>
<span>+</span>
<div class="panel">
<p>Hello</p>
</div>
</li>
<li>
<h3>Second Question</h3>
<span>+</span>
<div class="panel">
<p>helelo</p>
</div>
</li>
<li>
<h3>Third Question</h3>
<span>+</span>
<div class="panel">
<p>How are you</p>
</div>
</li>
</ul>