how to hide an accordion pane in javascript-CodePudding

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 >First Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Second Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Third Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
</div>

CodePudding user response：

Change the line
$("#faq_slide .answer").not(":first").hide()
to:
$("#faq_slide .answer").hide()

$("#faq_slide .answer").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 >First Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Second Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Third Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
</div>

CodePudding user response：

Just Remove the .not(":first") from $("#faq_slide .answer").not(":first").hide(); because that part selects all the elements except the first.

$("#faq_slide .answer").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 >First Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Second Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Third Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
</div>

CodePudding user response：

Do you mean all of them should be closed initially? Remove the .not(":first") from the first line.

$("#faq_slide .answer").hide()

$("#faq_slide .answer").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 >First Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Second Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
  <div >Third Question</div>
  <div >Lorem ipsum dolor sit amet.</div>
</div>