Not Vanilla, not JavaScript’s job.

1. jQuery is NOT Vanilla JavaScript. No matter what lame excuses or manipulative spin you try to put on it.

2. Show/hide toggles are no longer any of JavaScript's business, as you can use a hidden checkbox as a toggle, or use the new <details> and <summary> tags.

3. You have scripting only CDATA in the markup, making it an accessibility wreck. Just as the scripting only functionality is an accessibility violation. That said anchors are non-functional and/or not hidden from parsing makes it a double whammy.

Probably wouldn't hurt if you weren't telling users with accessibility needs to go plow themselves with the derpy use of pixel metrics in padding and font-size as well.

By adding two input and two empty label hidden from non-visual UA's, getting rid of your anchors, and writing about the same amount of CSS as you originally had...

https://codepen.io/jason-knight/pen/abNGdOv

We can do away with the pointless JavaScript entirely. This is not JavaScript's job any time after around 2012.

Basically your original is 603 bytes of HTML, 492 bytes of CSS, and 1.63k of garbage JavaScript that relies on the even bigger massive bloated steaming pile of derpitude that is jQuery, in a manner that violates accessibility norms, doing the job of 677 bytes of HTML, 646 bytes of CSS, and not a single blasted line of JavaScript.

THIS is what’s wrong with modern “development”. JS for nothing and your scripts for free. That ain’t workin’, that’s NOT how you do it. Lemme tell ya, these guys ARE dumb.

I’d also suggest you stop making up fairy tale tags that don’t actually exist in real / vanilla HTML like <container>.

And again, even it it were JavaScript’s job, /FAIL/ at “vanilla”.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store