{"id":18540,"date":"2022-11-01T05:10:08","date_gmt":"2022-10-31T23:40:08","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/"},"modified":"2022-11-01T05:10:08","modified_gmt":"2022-10-31T23:40:08","slug":"solved-make-information-available-when-javascript-disabled","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/","title":{"rendered":"[Solved] Make information available when JavaScript disabled"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

There are a couple of decent methodologies you can employ. <\/p>\n

Generally to enable content to be seen by non js users, it should all be set to be shown in the css, and only hidden when js is enabled. This means all of the content can be read and indexed (this is also good practice for people who use screen readers). <\/p>\n

To add this technique you can add a tag to your html or body<\/p>\n

<html class=\"no-js\">\n<\/code><\/pre>\n
And then in your javascript have this class removed. jquery example: <\/p>\n
$('html').removeClass('no-js');\n<\/code><\/pre>\n
This is something modernizr employs. This then allows you to write different css for js and non js users. <\/p>\n
A crude example: <\/p>\n
body { background:#EEE; }\n\n.no-js body { background:#FFF; }\n<\/code><\/pre>\n
And so on. <\/p>\n
EDIT<\/strong><\/p>\n
Have you tested your code with js disabled? As there is no css in your example it might actually work properly. <\/p>\n
Another technique that might help your code would be to make the h2’s anchor tags and have them display the linked content via jquery but for non-js users have them jump to the relevant section via an id tag, like a bookmark. I will try and make a fiddle soon.  <\/p>\n
OK have a look at this fiddle: http:\/\/jsfiddle.net\/lharby\/w2mkem8k\/<\/a><\/p>\n
This is the new js. <\/p>\n
$(\".hidden\").hide(); \n$(\"a\").on('click', function(){\n  var id = $(this).attr(\"href\");\n    $('.hidden').hide();\n    $(id).show();\n      return false;\n  });\n<\/code><\/pre>\n
I have turned the h2’s into anchors. If you disable javascript all of the content is visible and the links jump to the appropriate sections. <\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            0<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Make information available when JavaScript disabled <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] There are a couple of decent methodologies you can employ. Generally to enable content to be seen by non js users, it should all be set to be shown in the css, and only hidden when js is enabled. This means all of the content can be read and indexed (this is also good … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[346,333,388],"class_list":["post-18540","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-javascript","tag-jquery"],"yoast_head":"\n[Solved] Make information available when JavaScript disabled - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Make information available when JavaScript disabled - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] There are a couple of decent methodologies you can employ. Generally to enable content to be seen by non js users, it should all be set to be shown in the css, and only hidden when js is enabled. This means all of the content can be read and indexed (this is also good ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-31T23:40:08+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Make information available when JavaScript disabled\",\"datePublished\":\"2022-10-31T23:40:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/\"},\"wordCount\":245,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"html\",\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/\",\"name\":\"[Solved] Make information available when JavaScript disabled - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-31T23:40:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Make information available when JavaScript disabled\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Make information available when JavaScript disabled - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Make information available when JavaScript disabled - JassWeb","og_description":"[ad_1] There are a couple of decent methodologies you can employ. Generally to enable content to be seen by non js users, it should all be set to be shown in the css, and only hidden when js is enabled. This means all of the content can be read and indexed (this is also good ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/","og_site_name":"JassWeb","article_published_time":"2022-10-31T23:40:08+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Make information available when JavaScript disabled","datePublished":"2022-10-31T23:40:08+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/"},"wordCount":245,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/","url":"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/","name":"[Solved] Make information available when JavaScript disabled - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-31T23:40:08+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-make-information-available-when-javascript-disabled\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Make information available when JavaScript disabled"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/18540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=18540"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/18540\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=18540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=18540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=18540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}