I wrote a similar solution the other day, here.
Basically, you are limited when using the :checked
method. You are relying on the adjacent and general sibling combinators, +
, ~
. If the element isn't a general preceding sibling, it isn't going to work.
In this example, .expand
was not a preceding sibling. Therefore the solution is to place the input
element at the root of the document, and then use the selector input[name='panel']:checked ~ label .rotate
to change the .rotate
element. Note, that the general sibling combinator, ~
is now also being used as opposed to the adjacent sibling combinator, +
.
No need for JS - UPDATED EXAMPLE
Modified HTML:
<input type="checkbox" name="panel" class="hidden" id="panel"/>
<label for="panel">
Click Me
<div class="rotate">+</div>
</label>
<div class="expand">
Content goes here.
</div>
Updated CSS:
input[name='panel']:checked ~ label .rotate {
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
It's worth noting that I moved the transition properties to the .rotate
element too.