Using the HTML tag details for easy accordions

HTML

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="details-wrap">
<ul>
  <li>
    <details>
      <summary>The details HTML element <i class="fa fa-plus"></i></summary>
      <p>The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the summary element.</p>
    </details>
  </li>
  <li>
    <details>
      <summary>A disclosure widget is typically presented <i class="fa fa-plus"></i></summary>
      <p>A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the summary element are used as the label for the disclosure widget.</p>
    </details>
  </li>
  <li>
    <details>
      <summary>When the user clicks on the widget <i class="fa fa-plus"></i></summary>
      <p>When the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents. The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisty".</p>
    </details>
  </li>  
</ul>
</div>

CSS

.details-wrap ul {
  margin: 50px auto;
  list-style:none;
}

.details-wrap  ul li {
  margin-bottom: 8px;
}

.details-wrap details {
  background: #303030;
}

.details-wrap details summary i {
  transition: 0.15s;
}

.details-wrap details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 20px 56px;
}

.details-wrap details[open] summary i {
  transform: rotate(45deg);
}

.details-wrap details p {
  padding: 26px;
  border-top: 1px solid #000;
}