<div class="container">
  <h1>Frequently Asked Questions</h1>
  <summary>How do I create accordion?</summary>
 The tags <em>details</em> and <em>summary</em> have you covered.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

  background-color: #000;
  font-family: 'Open Sans', sans-serif;

.container h1{
  color: #fff;
  text-align: center;

  background-color: #303030;
  color: #fff;
  font-size: 1.5rem;

summary {
  padding: .5em 1.3rem;
  list-style: none;
  display: flex;
  justify-content: space-between;  
  transition: height 1s ease;

summary::-webkit-details-marker {
  display: none;

  content: "\002B";

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;

details[open] summary:after{
  content: "\00D7";

details[open] div{
  padding: .5em 1em;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.