How to keep a CSS element active until clicked again?

English Shopify Shopify Design
1

I have built an FAQ section, where the question is in the colour grey. I would like it that when the element is clicked the text turns to black. I used the ‘:active’ in my CSS file but that obviously only works when the element is being clicked. How can I make it so that when it is clicked it remains active until clicked again, or another question is clicked?

Thank you! My CSS code is below :slightly_smiling_face:

.tab-label {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 1em;
    font-weight: bold;
    color: #87878c;
    background-color: #fff;
  }

  .tab-label:active {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 1em;
    font-weight: bold;
    color: #2c2c2c;
    background-color: #fff;
  }
2

Don’t worry this is solved!