handling elements that use javascript when javascript isn't available.

Hey, if you have an element that utilizes javaScript, perhaps a button that opens up an accordion, however the user either has javascript turned off on their browser or something in your code/browser causes it to fail to load, how do you appropriately handle that element, since it won't do anything?

i'd appreciate any insight. Thanks in advance.

Ἔ

ἔρως•10/7/24, 1:07 AM

for an accordion, i would use , which doesn't require any javascript at all to function

Ἔ

ἔρως•10/7/24, 1:08 AM

if you want to keep just 1 open at a time, then you can emulate support for it using javascript, but it isn't something absolutely mandatory for it to work

Ἔ

ἔρως•10/7/24, 1:10 AM

but for other things, well, it depends

Ἔ

ἔρως•10/7/24, 1:11 AM

for example, a form that needs javascript is a bad form

Ἔ

ἔρως•10/7/24, 1:11 AM

you can submit and have validation without javascript

Ἔ

ἔρως•10/7/24, 1:12 AM

but, for example, for a dialog with extra content, it's a good idea to have a page that google can index and that the non-javascript links can default to

Ἔ

ἔρως•10/7/24, 1:12 AM

for a menu, there's the checkbox hack

Ἔ

ἔρως•10/7/24, 1:13 AM

or use details, if you want people to scream and shot, but works fine-ish

Ἔ

ἔρως•10/7/24, 1:15 AM

it really really depends exactly on what you want to do

Ἔ

ἔρως•10/7/24, 1:15 AM

and how you want it to work

Ἔ

ἔρως•10/7/24, 1:15 AM

and how happy you are with the failure methods

Ἔἔρως for an accordion, i would use `<details>`, which doesn't require any javascript ...

snxxwyyOP•10/7/24, 1:36 AM

i thought wasn't fully supported yet? wouldn't you need js for a fallback if browsers don't support it?

and for forms, i thought you needed javascript to pull the data to either use it or send it somewhere?

Ἔ

ἔρως•10/7/24, 1:38 AM

where did you get that idea that wasn't supported?

Ἔ

ἔρως•10/7/24, 1:39 AM

it's been supported by chrome for 13 years, and by firefox for 8 years

Ἔ

ἔρως•10/7/24, 1:39 AM

what is new is setting a

name

name

attribute and only one of them is open, which you have to polyfill in javascript

Ἔ

ἔρως•10/7/24, 1:40 AM

corejs should have it working, or you can ignore it

Ἔ

ἔρως•10/7/24, 1:40 AM

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#multiple_named_disclosure_boxes

Ἔ

ἔρως•10/7/24, 1:40 AM

and about the forms, what you said is absolutely not true

Ἔ

ἔρως•10/7/24, 1:40 AM

forms existed before javascript was a figment of anyone's imagination

Ἔ

ἔρως•10/7/24, 1:41 AM

you can use javascript, but you don't have to

snxxwyyOP•10/7/24, 1:46 AM

i've just seen most people use js instead of , i knew it existed but hadn't seen it used or come across it so i assumed it wasn't a supported thing. with the whole element is clickable, if you have a button you want to click instead of the text as well, which is what i more commonly saw, i assume that'd need js

in terms of fallbacks, i assume fallbacks for accordions that use js would just to have the content be visible if the js can't load. for styles you want to apply if js isn't active, you'd put them between a tag right?

snxxwyyOP•10/7/24, 1:48 AM

oh, so with forms how is it sent somewhere, is it a data attribute? i had this sort of thing in mind when i mentioned it. i assume to check the correct answer for something like this you'd have to compare the input against an answer with js?

Ssnxxwyy i've just seen most people use js instead of `details`, i knew it existed but ha...

Ἔ

ἔρως•10/7/24, 2:06 AM

no, you can make the look like a button

Ἔ

ἔρως•10/7/24, 2:07 AM

and in terms of fallback, what exactly are you referring to?

Ἔ

ἔρως•10/7/24, 2:07 AM

oh, fallbacks for the element

Ἔ

ἔρως•10/7/24, 2:07 AM

well, depends

Ἔ

ἔρως•10/7/24, 2:07 AM

if the javascript is disabled, you can do nothing

Ἔ

ἔρως•10/7/24, 2:07 AM

just show everything

Ἔ

ἔρως•10/7/24, 2:08 AM

depending on how you implement it

Ssnxxwyy oh, so with forms how is it sent somewhere, is it a data attribute? i had this s...

Ἔ

ἔρως•10/7/24, 2:08 AM

the and the attributes control that

Ἔ

ἔρως•10/7/24, 2:09 AM

you have to do ALL, ANY AND EVERY SINGLE CHECK in the server

Ἔ

ἔρως•10/7/24, 2:09 AM

doing in javascript is "optional"

Ἔ

ἔρως•10/7/24, 2:09 AM

better yet: html already has some validation included!

Ἔ

ἔρως•10/7/24, 2:10 AM

and you can do a lot more than you imagine with just the html validation

snxxwyyOP•10/7/24, 2:27 AM

i meant something like this, i assume changing the 's display to achieve that isn't valid? And when i referenced the button, i meant something like the plus icon on the end. I assumed you'd have to that if you just wanted that to open it since the whole summary element is clickable. https://codepen.io/deerCabin/pen/XWvKyRy

and for the forms, do you put a url in the and it sends it there? also, do you have an resources for the html validation for it?

CodePenR

details accordion query

...

Ἔ

ἔρως•10/7/24, 2:27 AM

you assume absolutely wrong

Ἔ

ἔρως•10/7/24, 2:28 AM

you can easily put an icon there, and you can change the display of

Ἔ

ἔρως•10/7/24, 2:29 AM

you can do an inline-grid with

Ἔ

ἔρως•10/7/24, 2:30 AM

and for the

form

form

, yes the is where the url goes

Ἔ

ἔρως•10/7/24, 2:32 AM

and if you use to submit to a dialog, the is ignored

Ἔ

ἔρως•10/7/24, 2:32 AM

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action

snxxwyyOP•10/7/24, 2:37 AM

oh cool, what if you just wanted the icon to activare the accordion though?

snxxwyyOP•10/7/24, 2:37 AM

and thanks for the link

Ssnxxwyy oh cool, what if you just wanted the icon to activare the accordion though?

Ἔ

ἔρως•10/7/24, 2:37 AM

you do absolutely nothing

Ἔ

ἔρως•10/7/24, 2:37 AM

and everything activates it

Ἔ

ἔρως•10/7/24, 2:38 AM

if you want just the icon, then you can use on the element with text

snxxwyyOP•10/7/24, 2:43 AM

ohh i see, thank you for all the help

Ἔ

ἔρως•10/7/24, 2:44 AM

you're welcome