JSFiddle - React, Tailwind, and code Playground

by Vo Tai Tri

HTML

<details>
  <summary>Q1: question #1</summary>
  <p>answer #1</p>
</details>
<details>
  <summary>Q2: question #2</summary>
  <p>answer #2</p>
</details>
<details>
  <summary>Q3: question #3</summary>
  <p>answer #3</p>
</details>
<br>
<br> Open: <b id=openDetailCount></b>
<br> Closed: <b id=closedDetailCount></b>

CSS

body{
  counter-reset: openDetailCount, closedDetailCount;
}
details{
  counter-increment: closedDetailCount;
}
details[open]{
  counter-increment: openDetailCount;
}
#closedDetailCount::before{
  content: counter(closedDetailCount);
}
#openDetailCount::before{
  content: counter(openDetailCount);
}
b{
  color: red;
}