Elements - Accordion

<ul class="accordion">
  <li class="active">
    <div class="accordion-title">
      <h4>Where to start?</h4>
      <div class="title-arrow">
        <i class="fa-solid fa-angle-down"></i>
      </div>
    </div>
    <div class="accordion-content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem officiis corrupti earum dolorem, eveniet obcaecati doloribus, dolores voluptate eum culpa vel? Deserunt nam quod fugit. Ut perspiciatis sequi natus officia.</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h4>Data analytics</h4>
      <div class="title-arrow">
        <i class="fa-solid fa-angle-down"></i>
      </div>
    </div>
    <div class="accordion-content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem officiis corrupti earum dolorem, eveniet obcaecati doloribus, dolores voluptate eum culpa vel? Deserunt nam quod fugit. Ut perspiciatis sequi natus officia.</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h4>Understanding the market</h4>
      <div class="title-arrow">
        <i class="fa-solid fa-angle-down"></i>
      </div>
    </div>
    <div class="accordion-content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem officiis corrupti earum dolorem, eveniet obcaecati doloribus, dolores voluptate eum culpa vel? Deserunt nam quod fugit. Ut perspiciatis sequi natus officia.</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h4>What can we do to help?</h4>
      <div class="title-arrow">
        <i class="fa-solid fa-angle-down"></i>
      </div>
    </div>
    <div class="accordion-content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem officiis corrupti earum dolorem, eveniet obcaecati doloribus, dolores voluptate eum culpa vel? Deserunt nam quod fugit. Ut perspiciatis sequi natus officia.</p>
    </div>
  </li>
</ul>

<ul class="accordion single-open">
  <li class="active">
    <div class="accordion-title">
      <h4>Where to start?</h4>
      <div class="title-arrow">
        <i class="fa-solid fa-angle-down"></i>
      </div>
    </div>
    <div class="accordion-content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem officiis corrupti earum dolorem, eveniet obcaecati doloribus, dolores voluptate eum culpa vel? Deserunt nam quod fugit. Ut perspiciatis sequi natus officia.</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h4>Data analytics</h4>
      <div class="title-arrow">
        <i class="fa-solid fa-angle-down"></i>
      </div>
    </div>
    <div class="accordion-content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem officiis corrupti earum dolorem, eveniet obcaecati doloribus, dolores voluptate eum culpa vel? Deserunt nam quod fugit. Ut perspiciatis sequi natus officia.</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h4>Understanding the market</h4>
      <div class="title-arrow">
        <i class="fa-solid fa-angle-down"></i>
      </div>
    </div>
    <div class="accordion-content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem officiis corrupti earum dolorem, eveniet obcaecati doloribus, dolores voluptate eum culpa vel? Deserunt nam quod fugit. Ut perspiciatis sequi natus officia.</p>
    </div>
  </li>
  <li>
    <div class="accordion-title">
      <h4>What can we do to help?</h4>
      <div class="title-arrow">
        <i class="fa-solid fa-angle-down"></i>
      </div>
    </div>
    <div class="accordion-content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem officiis corrupti earum dolorem, eveniet obcaecati doloribus, dolores voluptate eum culpa vel? Deserunt nam quod fugit. Ut perspiciatis sequi natus officia.</p>
    </div>
  </li>
</ul>