Different transitions with checkbox

What i’m trying to do is something similar to this (http://tympanus.net/Development/SelectInspiration/index2.html). As you can see, when you click in “Choose a Bouquet”, the first option appear first, then the second, then the third, etc; and when you click again the last option dissapear first, then the fourth, then the third, etc.

In my code i can’t make this last thing work. When you click for the second time, the first option dissapear first, then second…in other words, in the same order they appear first.

Any idea of how can i make my code more likely to the example in the link? Thanks a lot.

My code here

Isn’t this a Javascript question?

Is there a way to do it in css? If not, i’m gonna try it with javascript, but i wanted to know first if you could do it in css.

I mean, yeah I guess. You’d have to just set somewhat of a bigger transitional delay between the items appearing. Get an attempt worked up and we’ll go from there.

Uhhmmm…set a bigger delay between the items appearing? I don’t know if i’m undertanding you well, but i can’t see how that would change the order of the items dissapearing. That, i think, only will slow the transition, but will not affect the order of the items. (Thanks for the patience).

Like this:

#activate-menu:checked ~ .menu ul li.option:first-child {transition-delay: .0s;}
#activate-menu:checked ~ .menu ul li.option:nth-child(2) {transition-delay: .05s;}
#activate-menu:checked ~ .menu ul li.option:nth-child(3) {transition-delay: .1s;}
#activate-menu:checked ~ .menu ul li.option:nth-child(4) {transition-delay: .15s;}
#activate-menu:checked ~ .menu ul li.option:last-child {transition-delay: .2s;}

li.option:first-child {transition-delay: .2s;}
li.option:nth-child(2) {transition-delay: .15s;}
li.option:nth-child(3) {transition-delay: .1s;}
li.option:nth-child(4) {transition-delay: .05s;}
li.option:last-child {transition-delay: .0s;}

That doesn’t work neither :worried: Now the items don’t appear.

This action shot is from your codepen. What is not working?

Yes, that’s work. In that shot the options are appearing. What i’m want to change is the order of the dissapearing options (when you click the boton for the second time), so it would inverse from the appearing option (this is it, the last option dissapear first, the fourth dissapear second, etc…). In the link on my first post, you can see the difference.

The demo uses JavaScript.

An HTML list is read from first to last, so the first item in the the list will be the First-In & First-Out as your CodePen shows. I’m not aware of a way to change that behavior without JavaScript.

I beg your pardon?

It works perfectly for me.

Or did you mean something else?


No, i’m sorry, that’s exactly what i wanted. Surely i make some mistake copying the cody, i’m going to check it right now. Thanks a lot!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.