{"id":31584,"date":"2023-01-22T17:50:14","date_gmt":"2023-01-22T12:20:14","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/"},"modified":"2023-01-22T17:50:14","modified_gmt":"2023-01-22T12:20:14","slug":"solved-webpage-not-working-html5-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/","title":{"rendered":"[Solved] Webpage not working &#8211; HTML5 [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-18043567\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"18043567\" data-parentid=\"18043432\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>If my understanding is correct, your problem is that on the actual website page, all the links are being displayed on page load instead of like in the sample page where they are hidden and displayed only based on selection.<\/p>\n<p>If this is the case assign the <code>style: display: none;<\/code> to all the individual div tags. This will hide the links on page load. You can do this like below:<\/p>\n<p><code>&lt;div id=\"Option\" style=\"display: none;\"&gt; &lt;a href=\"#\"&gt;Sample&lt;\/a&gt; &lt;\/div&gt;<\/code><\/p>\n<p>If you don&#8217;t want to use inline styles, create a CSS class (say <code>hidden<\/code>) in the following way and assign it to all the Divs that need to be hidden.<\/p>\n<pre><code>.hidden{ \n    display: none;\n}\n<\/code><\/pre>\n<p>The JS currently seems to be hiding all DIVs whose ID does not equal the selected item&#8217;s value. This was making your <code>mainContent1<\/code> also get hidden. Try the code present in this <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/jsfiddle.net\/hari_shanx\/qg4fE\/\">fiddle<\/a>. It is a mini version of your code.<\/p>\n<p>I have added a CSS class <code>hidden<\/code> to the divisions and in the <code>showTab<\/code> function of the JS instead of <\/p>\n<p><code>$('div').not(name).hide();<\/code><\/p>\n<p>use the following line (this will select only DIVs within mainContent1 for hiding).<\/p>\n<p><code>$('#mainContent1 &gt; div').not(name).hide();<\/code><\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">11<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Webpage not working &#8211; HTML5 [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] If my understanding is correct, your problem is that on the actual website page, all the links are being displayed on page load instead of like in the sample page where they are hidden and displayed only based on selection. If this is the case assign the style: display: none; to all the individual &#8230; <a title=\"[Solved] Webpage not working &#8211; HTML5 [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/\" aria-label=\"More on [Solved] Webpage not working &#8211; HTML5 [closed]\">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,5406,333],"class_list":["post-31584","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-html-select","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Webpage not working - HTML5 [closed] - 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-webpage-not-working-html5-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Webpage not working - HTML5 [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] If my understanding is correct, your problem is that on the actual website page, all the links are being displayed on page load instead of like in the sample page where they are hidden and displayed only based on selection. If this is the case assign the style: display: none; to all the individual ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-22T12:20:14+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-webpage-not-working-html5-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Webpage not working &#8211; HTML5 [closed]\",\"datePublished\":\"2023-01-22T12:20:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/\"},\"wordCount\":185,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"html\",\"html-select\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/\",\"name\":\"[Solved] Webpage not working - HTML5 [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2023-01-22T12:20:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Webpage not working &#8211; HTML5 [closed]\"}]},{\"@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] Webpage not working - HTML5 [closed] - 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-webpage-not-working-html5-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Webpage not working - HTML5 [closed] - JassWeb","og_description":"[ad_1] If my understanding is correct, your problem is that on the actual website page, all the links are being displayed on page load instead of like in the sample page where they are hidden and displayed only based on selection. If this is the case assign the style: display: none; to all the individual ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/","og_site_name":"JassWeb","article_published_time":"2023-01-22T12:20:14+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-webpage-not-working-html5-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Webpage not working &#8211; HTML5 [closed]","datePublished":"2023-01-22T12:20:14+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/"},"wordCount":185,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","html-select","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/","name":"[Solved] Webpage not working - HTML5 [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-01-22T12:20:14+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-webpage-not-working-html5-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Webpage not working &#8211; HTML5 [closed]"}]},{"@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\/31584","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=31584"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/31584\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=31584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=31584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=31584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}