Solved

How to keep a CSS element active until clicked again?

AllOut
Shopify Partner
37 3 5

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 🙂

 

 

 

.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;
  }

 

 

  

Accepted Solution (1)

AllOut
Shopify Partner
37 3 5

This is an accepted solution.

Don't worry this is solved!

View solution in original post

Reply 1 (1)

AllOut
Shopify Partner
37 3 5

This is an accepted solution.

Don't worry this is solved!