<div class="container">
  <h1>Frequently Asked Questions</h1>
  <details>
  <summary>How do I create accordion?</summary>
  <div>
 The tags <em>details</em> and <em>summary</em> have you covered.
  </div>
</details>
</div>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

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

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

details{
  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;
}

summary:after{
  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;
}