<section class="html-accordion">
  <h2>Pure html accordion</h2>

  <!-- first accordion -->
  <details>
    <summary>Header</summary>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
      neque, velit quasi quos quia nulla omnis! Similique dolorum,
      veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
      atque vitae quia accusamus.
    </p>
  </details>
</section>

<section class="html-css-accordion">
  <h2>Html accordion with styling</h2>
  <!-- first accordion -->
  <details>
    <summary>Header 1</summary>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
      neque, velit quasi quos quia nulla omnis! Similique dolorum,
      veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
      atque vitae quia accusamus.
    </p>
  </details>

  <!-- second accordion -->
  <details>
    <summary>Header 2</summary>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
      neque, velit quasi quos quia nulla omnis! Similique dolorum,
      veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
      atque vitae quia accusamus.
    </p>
  </details>

  <!-- third accordion -->
  <details>
    <summary>Header 3</summary>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
      neque, velit quasi quos quia nulla omnis! Similique dolorum,
      veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
      atque vitae quia accusamus.
    </p>
  </details>
</section>
/* section wrappers */
.html-accordion,
.html-css-accordion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* html accordion */
.html-accordion details {
  width: 280px;
}

/* css accordion card */
.html-css-accordion details {
  width: 280px;
  border: double goldenrod;
  background-color: white;
}

/* css accordion title */
.html-css-accordion summary {
  font-weight: bold;
  color: #202020;
  position: relative;
  padding: 10px;
  margin-bottom: 0;
}

/* css accordion body */
.html-css-accordion p {
  border-top: solid 1px goldenrod;
  padding: 10px;
  color: #3d3b3b;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.