CODEWITHSUNDEEP
css
KingKongFrog
KingKongFrog

Reputation: 14419

Toggle class with css not jquery

Is is possible to toggle a class with only css?

Say I have the following:

<div class="parent">
   <div class="child collapsed">
        Boring Text
   </div>
</div>

Is is possible, just with css, that when you click on the parent, you can switch the collapsed class to expanded and vice versa?

Upvotes: 6

Views: 10403

Answers (2)

Alison Nunes
Alison Nunes

Reputation: 165

You can figure out some like this https://stackoverflow.com/a/76489732/8382657

.caret {
  transition: 0.5s;
}
.caret:not(.collapsed){
  transform: rotate(180deg);
}
.caret:is(.collapsed) {
  transform: rotate(0deg);
}

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179046

Is is possible to toggle a class with only css?

No.

You can have state handled by using pseudo-classes such as :hover, :active, :checked, and :target but this is not the same as changing the state of class attributes the DOM.

Upvotes: 11

Related Questions