hello I have been looking for a good accordion for a long time.
I finally found a model that I like.
The only small concern is that I would like when I open my page with the accordion
Let the first part be hidden like the two below
when the page loads
$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function() {
if ($(this).next(".answer").is(":visible")) {
$(this).next(".answer").slideUp(300);
} else {
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});body {
font-family: "Inter", sans-serif;
padding: 20px;
}
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div id="faq_slide">
<div class="question">First Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
</div>
3
Answers
Change the line
$("#faq_slide .answer").not(":first").hide()to:
$("#faq_slide .answer").hide()Just Remove the
.not(":first")from$("#faq_slide .answer").not(":first").hide();because that part selects all the elements except the first.Do you mean all of them should be closed initially?
Remove the
.not(":first")from the first line.