CODEWITHSUNDEEP
htmlcsscss-transitions
nsx
nsx

Reputation: 705

CSS transition on div triggered by inner checkbox

I have the following simple example where I animate the position of a given div through CSS's transition directive (http://jsfiddle.net/rtubio/dmhqjhd3/):

<input type='checkbox' id='toggle' class='toggle' />
<label for='toggle'></label>

<div id='area' class='area'>
    <div id='area-title' class='area-title'></div>
</div>

... and I have the associated CSS code (see the JSFiddle) that animates the translation of the div -50px towards the bottom of the page whenever the label of the checkbox is clicked. If I move the checkbox+label to the inside of the div that I am trying to animate:

<div id='area' class='area'>
    <div id='area-title' class='area-title'>
        <input type='checkbox' id='toggle' class='toggle' />
        <label for='toggle'></label>
    </div>
</div>

... the animation stops working (see this second JSFiddle with the non-working example: http://jsfiddle.net/rtubio/k5o0uggu/). I have been looking for possible incompatibilities, but I have found none.

Does CSS have any restriction for this case?

Upvotes: 0

Views: 1657

Answers (2)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

Yes, CSS has a restriction that sibling combinators (+ and ~) can 'see' only following siblings of DOM element, i.e. elements that are direct children of the parent of given element and come later in the source order than this element. CSS can't select ancestors of the element. So you have to leave your checkbox outside and before .area to keep it possible to control .area by :checked state of the checkbox.

But since your checkbox is invisible and label transfers the clicks to it regardless its position in the DOM, you can move only label inside .area and modify your selectors respectively, e.g.

.toggle + div label {
    text-align: center;
    display: block;
    position: relative;
}

.toggle + div label:after {
    content: '(hide)'; 
}

.toggle:checked + div label:after {
    content: '(show)';
}

See edited fiddle

Upvotes: 2

Dava Gordon
Dava Gordon

Reputation: 192

Your problem is .toggle:checked ~ .area as you have placed .toggle within .area it has nothing to change the position on if you place another div below add a class and change the css to

.toggle:checked ~ .newclass

everything should work

Upvotes: 0

Related Questions