How to make a list appear and disappear on checkbox click

Question

0.00/5 (No votes)

See more:

I'm designing a portfolio website and I'm trying to get a list of projects to display sequentially on the click of a checkbox, I've got it working but there's an issue. If you click on the checkbox repeatedly, it misses projects out, I can't work out why that would be? The setInterval finishes far before the transitions do so I thought the fix may be delaying the setInterval so that each iteration waited until it's transition was finished but I can't make it work. I'm happy to completely refactor it but I have no idea what direction to take! Essentially I need a system I can stop or start at any point which will allow the current transition to finish then reverse direction. Could this be done in pure CSS?

What I have tried:

I've tried loops and array methods but settled on setInterval as it seemed to be the easiest to break out of and restart. I've tried to make the setInterval iteration wait until the transition has ended using transitionend. I read something about promises that seemed like it might work but after fiddling around with it a lot, didn't get anywhere.

Simplified Codepen here

Posted 21-Jul-22 3:53am

MrLupine

Add a Solution

Comments

Mike Hankey 21-Jul-22 11:59am

Disable Checkbox until transition finished?

MrLupine 24-Jul-22 13:35pm

Thanks for your response Mike! No, it's not the checkbox that I want to stop moving, something in the function is causing things to be omitted from the list of projects, I assume I need to pause the setInterval until the transition ends but I have no idea how to do it!

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)