Collapse

<div class="gh-collapse">
  <details class="gh-collapse--item">
    <summary>
      <h4 class="gh-heading-small">Vad är skillnaden mellan Sommarkollo och att ha en personlig coach?</h4>
      <div class="gh-collapse--icon">
        <span></span>
        <span></span>
      </div>
    </summary>
    <div class="gh-collapse--panel">
      <div class="gh-typeset">
        <p>Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare.</p>
      </div>
    </div>
  </details>
  <details class="gh-collapse--item">
    <summary>
      <h4 class="gh-heading-small">När börjar programmet?</h4>
      <div class="gh-collapse--icon">
        <span></span>
        <span></span>
      </div>
    </summary>
    <div class="gh-collapse--panel">
      <div class="gh-typeset">
        <p>Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare.</p>
      </div>
    </div>
  </details>
  <details class="gh-collapse--item">
    <summary>
      <h4 class="gh-heading-small">Är det skillnad på programmet om jag är kvinna eller man?</h4>
      <div class="gh-collapse--icon">
        <span></span>
        <span></span>
      </div>
    </summary>
    <div class="gh-collapse--panel">
      <div class="gh-typeset">
        <p>Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare.</p>
      </div>
    </div>
  </details>
</div>

[
  {
    "title": "Vad är skillnaden mellan Sommarkollo och att ha en personlig coach?",
    "text": "Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare."
  },
  {
    "title": "När börjar programmet?",
    "text": "Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare."
  },
  {
    "title": "Är det skillnad på programmet om jag är kvinna eller man?",
    "text": "Nulla at volutpat diam ut. Risus sed vulputate odio ut enim blandit volutpat maecenas. Nunc consequat interdum varius sit amet mattis vulputate enim. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Rhoncus mattis rhoncus urna neque viverra. Sed blandit libero volutpat sed cras ornare."
  }
]