DEV Community

Jim Frenette
Jim Frenette

Posted on • Originally published at jimfrenette.com

2 1

Responsive Content Filter JavaScript

This code sample shows how to create a responsive list filter using plain JavaScript (no jQuery). JavaScript gets the breakpoint value from a hidden css pseudo element that uses a media query to set its value. Therefore, it is not necessary to maintain rendundant responsive breakpoint values in the script.

All of the code is available to edit and demo in our online sandbox.

Demo

jQuery version

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay