<details>
  <summary>To be or not to be?</summary>
  <div>
    That is the question!
  </div>
</details>
<details>
  <summary>To be or not to be?</summary>
  <div>
    That is the question!
  </div>
</details>
<details>
  <summary>To be or not to be?</summary>
  <div>
    That is the question!
  </div>
</details>

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

body{
  font-family: 'Lato', sans-serif;
}

details{
  background-color: #333;
  color: #f6f6f6;
  font-size: 1.5rem;
}

summary {
  padding: .5em;
  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 #ccc;
}

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

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