Hacker News Reader

Comment by spicybright | Hacker News Reader

I'll admit I'm a bit out of practice with the state of vanilla JS, but it seems like you'll be re-inventing the wheel for simple stuff.

Like a collapsible section that's lightly animated.

I worry too about people not considering accessibility.

A lot of my bugs day to day is not being able to tab into things like hover menus or being able to activate buttons because someone forgot to consider correct event callbacks.

Maybe it's different now, but using a jQuery makes it more likely the code will cover cases like that.

View on HN

I worry too about people not considering accessibility.

This isn't a complaint you can level at the gov.uk team. They're obsessed with accessibility. Gov.uk is probably the best example of a well-designed, well-built, completely accessible website on the whole internet.

I meant more for anyone building a website.

Whilst *.GOV.IN (India) is the worst.

Collapsible section? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de...

There's some CSS transition stuff you can add to that to make it lightly animated: https://css-tricks.com/how-to-animate-the-details-element/

Yeah, jQuery might make some things easier, but when possible, using native HTML elements makes things even easier,

Hmm, I would agree that you can do 95%+ of stuff jQuery used to be used for in vanilla js or html/css in a nicer way but animated collapsible divs still require a stupid amount of js to achieve.

Animated collapsible div can be done with 0 line of JS.

https://code-boxx.com/expand-collapse-div-css-only/

Uhh, did you check out how that actually functions? It looks like garbage.

Agreed, this example looks like total shit.

In 2020, a collapsible section is a matter of adding / removing a classname and a CSS animation; there's a few ways to do so, using jQuery is one, but you don't need thousands of lines of a JS library (network bandwidth + JS interpretation) to achieve that.

Can CSS transitions and animations handle animating to auto height/widths yet?

I don't think so. One trick I've used to good effect is setting an high max-height, then translating by 100% and removing pointer events.

I feel like this solution feels subtly "wrong" if you're animating, because that high max height will be arbitrarily far away from where you'd normally want to animate to. Doubly so for easing out.

Yeah it's a bit weird, but haven't found a better trick yet.

You bring up some interesting concerns. It's a good example of why there isn't a one size fits all answer. The UK gov site has high standards for these kind of things so will do it right anyway, but for a small shop leaning on a framework makes a lot of sense

If you've been using jQuery for years, know it, and can write a good amount of code without looking at a reference, then by all means, keep using it. It's not going anywhere anytime soon.

Reply on news.ycombinator.com