Acordeon (CSS/JS)

El acordeón permite expandir y colapsar secciones de contenido de forma dinámica, ideal para organizar grandes cantidades de información en un espacio reducido. Cada sección se despliega al hacer clic en su encabezado y se cierra automáticamente al abrir otra.
<style>
.faq-item {
  border-bottom: 1px solid #000;
  margin: 10px;
}

.faq-question {
  font-weight: 400;
  font-size: 20px;
  line-height: 50px;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-question-text {
  flex: 1;
}

.faq-toggle {
  font-size: 24px;
  margin-left: 10px;
}

.faq-answer {
  font-weight: 300;
  font-size: 15px;
  line-height: 27px;
  display: none;
  color: #000;
  overflow: hidden;
}

.faq-answer.active {
  display: block;
}
</style>

<section>
<div class="faq-item">
<h2 class="faq-question">Lorem Ipsum</h2>
<p class="faq-answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="faq-item">
<h2 class="faq-question">Lorem Ipsum</h2>
<p class="faq-answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="faq-item">
<h2 class="faq-question">Lorem Ipsum</h2>
<p class="faq-answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="faq-item">
<h2 class="faq-question">Lorem Ipsum</h2>
<p class="faq-answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>

<script>
const faqQuestions = document.querySelectorAll(".faq-question");

faqQuestions.forEach((question) => {
  const faqToggle = document.createElement("span");
  faqToggle.classList.add("faq-toggle");
  faqToggle.textContent = "+";
  question.appendChild(faqToggle);

  question.addEventListener("click", (e) => {
    const answer = e.target.nextElementSibling;
    answer.classList.toggle("active");
    if (answer.classList.contains("active")) {
      answer.style.height = answer.scrollHeight + "px";
      e.target.querySelector(".faq-toggle").textContent = "-";
    } else {
      answer.style.height = 0;
      e.target.querySelector(".faq-toggle").textContent = "+";
    }
  });
});
</script>