FAQ Module for HubSpot with Schema Support

<div class="faq-main">
  <div class="content-wrapper">
    <h2 class="faq-heading">{{ module.faq_heading }}</h2>
    <div class="faq-container">
      {% for item in module.faq_group %}
      <div class="faq-item {% if loop.index == 1 %}active{% endif %}">
        <h3 class="faq-question">{{ item.faq_question }}</h3>
        <div class="faq-answer" {% if loop.index != 1 %}style="display:none;"{% endif %}>
          {{ item.faq_answer }}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {% for item in module.faq_group %}
    {
      "@type": "Question",
      "name": "{{ item.faq_question|striptags }}",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "{{ item.faq_answer|striptags }}"
      }
    }{% if not loop.last %},{% endif %}
    {% endfor %}
  ]
}
</script>

<style>
  .faq-main {
    padding: 60px 0;
  }
  .faq-heading {
    text-align: center;
    margin-bottom: 40px;
  }
  .faq-container {
    margin-top: 40px;
  }
  .faq-question {
    cursor: pointer;
    font-size: 24px;
    margin-bottom: 10px;
  }
  .faq-answer {
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 4px;
    display: none;
  }
  .active .faq-answer {
    display: block;
  }
  @media (max-width: 767px) {
    .faq-main {
      padding: 40px 0;
    }
    .faq-question {
      font-size: 20px;
    }
  }
</style>