JSFiddle - React, Tailwind, and code Playground

HTML

<details>
    <summary>Click me to toggle more information</summary>
    <div class="more-info">Have you ever wondered if you could achieve that jQuery Accordion widget effect without jQuery? Did you think it will be ever possible to create that effect with just HTML? If yes, well, you can achieve that with the HTML5 &lt;details&gt; element.</div>
</details>

<details>
    <summary>Click me to toggle more information</summary>
    <div class="more-info">Have you ever wondered if you could achieve that jQuery Accordion widget effect without jQuery? Did you think it will be ever possible to create that effect with just HTML? If yes, well, you can achieve that with the HTML5 &lt;details&gt; element.</div>
</details>

CSS

details{
    border: 1px solid #666; border-radius: 4px; margin: 0 0 4px 0;
}
summary{ background: linear-gradient(to top, #f1efef 0%, #e8e9e9 50%, #e8e8e8 100%); padding: 8px; outline: none; }
.more-info{ border-top: 1px solid #666; padding: 8px; }
details[open] summary{ background: none; }

summary::-webkit-details-marker {
  color: #818b94; 
}

/* Marker Style Option*/
/* summary:after {  
  content: "+";   
  float: left; 
  font-size: 1em; 
  font-weight: bold;       
  width: 22px;
}
details[open] summary:after {
  content: "-";
} */