{"id":6421,"date":"2024-01-11T16:40:00","date_gmt":"2024-01-11T16:40:00","guid":{"rendered":"https:\/\/codehim.com\/?p=6421"},"modified":"2024-01-22T14:43:50","modified_gmt":"2024-01-22T09:43:50","slug":"simple-vanilla-javascript-tabs","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/","title":{"rendered":"Simple Vanilla JavaScript Tabs"},"content":{"rendered":"<p>This Vanilla JavaScript code snippet helps you to create simple tabs navigation. It allows you to add as many tabs as you want without updating JS code. You just need to create a tab header and content area, then this code snippet loop through the ids and create tabs navigation.<\/p>\n<h2>How to Create Simple Vanilla JavaScript Tabs<\/h2>\n<p>1. First of all, create the HTML structure as follows:<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;div id=\"wrapper\"&gt;\r\n  &lt;h1&gt;Pure Javascript, HTML 5 &amp; CSS3 Tabs&lt;\/h1&gt;\r\n  &lt;div id=\"tabContainer\"&gt;\r\n    &lt;div id=\"tabs\"&gt;\r\n      &lt;ul&gt;\r\n        &lt;li id=\"tabHeader_1\"&gt;Page 1&lt;\/li&gt;\r\n        &lt;li id=\"tabHeader_2\"&gt;Page 2&lt;\/li&gt;\r\n        &lt;li id=\"tabHeader_3\"&gt;Page 3&lt;\/li&gt;\r\n      &lt;\/ul&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div id=\"tabscontent\"&gt;\r\n      &lt;div class=\"tabpage\" id=\"tabpage_1\"&gt;\r\n        &lt;h2&gt;Page 1&lt;\/h2&gt;\r\n        &lt;p&gt;Your content goes here... &lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"tabpage\" id=\"tabpage_2\"&gt;\r\n        &lt;h2&gt;Page 2&lt;\/h2&gt;\r\n        &lt;p&gt;Your content goes here...&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"tabpage\" id=\"tabpage_3\"&gt;\r\n        &lt;h2&gt;Page 3&lt;\/h2&gt;\r\n        &lt;p&gt;Your content goes here...&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt; \r\n&lt;\/div&gt;<\/pre>\n<p>2. After that, add the following CSS styles into your project:<\/p>\n<pre class=\"prettyprint linenums lang-css\">* {\r\n\tmargin:0;\r\n\tpadding:0;\r\n}\r\n\r\nbody {\r\n\tbackground:url(..\/..\/images\/background.png) top left;\r\n\tfont: .8em \"Lucida Sans Unicode\", \"Lucida Grande\", sans-serif;\r\n}\r\n\r\nh2{ \r\n\tmargin-bottom:10px;\r\n}\r\n\r\n#wrapper{\r\n\twidth:720px;\r\n\tmargin:40px auto 0;\r\n}\r\n\r\n#wrapper h1{\r\n\tcolor:#FFF;\r\n\ttext-align:center;\r\n\tmargin-bottom:20px;\r\n}\r\n\r\n#wrapper a{\r\n\tdisplay:block;\r\n\tfont-size:1.2em;\r\n\tpadding-top:20px;\r\n\tcolor:#FFF;\r\n\ttext-decoration:none;\r\n\ttext-align:center;\r\n}\r\n\r\n#tabContainer {\r\n\twidth:700px;\r\n\tpadding:15px;\r\n\tbackground-color:#2e2e2e;\r\n\t-moz-border-radius: 4px;\r\n\tborder-radius: 4px; \r\n}\r\n\r\n#tabs{\r\n\theight:30px;\r\n\toverflow:hidden;\r\n}\r\n\r\n#tabs &gt; ul{\r\n\tfont: 1em;\r\n\tlist-style:none;\r\n}\r\n\r\n#tabs &gt; ul &gt; li{\r\n\tmargin:0 2px 0 0;\r\n\tpadding:7px 10px;\r\n\tdisplay:block;\r\n\tfloat:left;\r\n\tcolor:#FFF;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\tuser-select: none;\r\n\t-moz-border-radius-topleft: 4px;\r\n\t-moz-border-radius-topright: 4px;\r\n\t-moz-border-radius-bottomright: 0px;\r\n\t-moz-border-radius-bottomleft: 0px;\r\n\tborder-top-left-radius:4px;\r\n\tborder-top-right-radius: 4px;\r\n\tborder-bottom-right-radius: 0px;\r\n\tborder-bottom-left-radius: 0px; \r\n\tbackground: #C9C9C9; \/* old browsers *\/\r\n\tbackground: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); \/* firefox *\/\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); \/* webkit *\/\r\n}\r\n\r\n#tabs &gt; ul &gt; li:hover{\r\n\tbackground: #FFFFFF; \/* old browsers *\/\r\n\tbackground: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); \/* firefox *\/\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); \/* webkit *\/\r\n\tcursor:pointer;\r\n\tcolor: #333;\r\n}\r\n\r\n#tabs &gt; ul &gt; li.tabActiveHeader{\r\n\tbackground: #FFFFFF; \/* old browsers *\/\r\n\tbackground: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); \/* firefox *\/\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); \/* webkit *\/\r\n\tcursor:pointer;\r\n\tcolor: #333;\r\n}\r\n\r\n#tabscontent {\r\n\t-moz-border-radius-topleft: 0px;\r\n\t-moz-border-radius-topright: 4px;\r\n\t-moz-border-radius-bottomright: 4px;\r\n\t-moz-border-radius-bottomleft: 4px;\r\n\tborder-top-left-radius: 0px;\r\n\tborder-top-right-radius: 4px;\r\n\tborder-bottom-right-radius: 4px;\r\n\tborder-bottom-left-radius: 4px; \r\n\tpadding:10px 10px 25px;\r\n\tbackground: #FFFFFF; \/* old browsers *\/\r\n\tbackground: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); \/* firefox *\/\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); \/* webkit *\/\r\n\tmargin:0;\r\n\tcolor:#333;\r\n}<\/pre>\n<p>3. Finally, add the following JavaScript code and done.<\/p>\n<pre class=\"prettyprint linenums lang-js\">\/\/ get tab container\r\n  \tvar container = document.getElementById(\"tabContainer\");\r\n\t\tvar tabcon = document.getElementById(\"tabscontent\");\r\n\t\t\/\/alert(tabcon.childNodes.item(1));\r\n    \/\/ set current tab\r\n    var navitem = document.getElementById(\"tabHeader_1\");\r\n\t\t\r\n    \/\/store which tab we are on\r\n    var ident = navitem.id.split(\"_\")[1];\r\n\t\t\/\/alert(ident);\r\n    navitem.parentNode.setAttribute(\"data-current\",ident);\r\n    \/\/set current tab with class of activetabheader\r\n    navitem.setAttribute(\"class\",\"tabActiveHeader\");\r\n\r\n    \/\/hide two tab contents we don't need\r\n   \t var pages = tabcon.getElementsByTagName(\"div\");\r\n    \tfor (var i = 1; i &lt; pages.length; i++) {\r\n     \t pages.item(i).style.display=\"none\";\r\n\t\t};\r\n\r\n    \/\/this adds click event to tabs\r\n    var tabs = container.getElementsByTagName(\"li\");\r\n    for (var i = 0; i &lt; tabs.length; i++) {\r\n      tabs[i].onclick=displayPage;\r\n    }\r\n\r\n\/\/ on click of one of tabs\r\nfunction displayPage() {\r\n  var current = this.parentNode.getAttribute(\"data-current\");\r\n  \/\/remove class of activetabheader and hide old contents\r\n  document.getElementById(\"tabHeader_\" + current).removeAttribute(\"class\");\r\n  document.getElementById(\"tabpage_\" + current).style.display=\"none\";\r\n\r\n  var ident = this.id.split(\"_\")[1];\r\n  \/\/add class of activetabheader to new active tab and show contents\r\n  this.setAttribute(\"class\",\"tabActiveHeader\");\r\n  document.getElementById(\"tabpage_\" + ident).style.display=\"block\";\r\n  this.parentNode.setAttribute(\"data-current\",ident);\r\n}<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully integrated this simple tabs code snippet into your project. If you have any questions or facing any issues, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This Vanilla JavaScript code snippet helps you to create simple tabs navigation. It allows you to add as many tabs&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6427,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[75],"class_list":["post-6421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript","tag-tabs"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Simple Vanilla JavaScript Tabs &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a lightweight Vanilla JavaScript code snippet to create simple tabs navigation. You can view demo and download code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple Vanilla JavaScript Tabs &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a lightweight Vanilla JavaScript code snippet to create simple tabs navigation. You can view demo and download code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T16:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:43:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-16.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Simple Vanilla JavaScript Tabs\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:43:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/\"},\"wordCount\":118,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-16.png\",\"keywords\":[\"Tabs\"],\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/\",\"name\":\"Simple Vanilla JavaScript Tabs &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-16.png\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:43:50+00:00\",\"description\":\"Here is a lightweight Vanilla JavaScript code snippet to create simple tabs navigation. You can view demo and download code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-16.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-16.png\",\"width\":1280,\"height\":960,\"caption\":\"Simple Vanilla JavaScript Tabs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Simple Vanilla JavaScript Tabs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple Vanilla JavaScript Tabs &#8212; CodeHim","description":"Here is a lightweight Vanilla JavaScript code snippet to create simple tabs navigation. You can view demo and download code.","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:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/","og_locale":"en_US","og_type":"article","og_title":"Simple Vanilla JavaScript Tabs &#8212; CodeHim","og_description":"Here is a lightweight Vanilla JavaScript code snippet to create simple tabs navigation. You can view demo and download code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T16:40:00+00:00","article_modified_time":"2024-01-22T09:43:50+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-16.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Simple Vanilla JavaScript Tabs","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:43:50+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/"},"wordCount":118,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-16.png","keywords":["Tabs"],"articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/","url":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/","name":"Simple Vanilla JavaScript Tabs &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-16.png","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:43:50+00:00","description":"Here is a lightweight Vanilla JavaScript code snippet to create simple tabs navigation. You can view demo and download code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-16.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-16.png","width":1280,"height":960,"caption":"Simple Vanilla JavaScript Tabs"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-vanilla-javascript-tabs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"Simple Vanilla JavaScript Tabs"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":5158,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=6421"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6421\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/6427"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=6421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=6421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=6421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}