{"id":9933,"date":"2024-03-04T10:30:00","date_gmt":"2024-03-04T10:30:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9933"},"modified":"2024-03-04T08:31:00","modified_gmt":"2024-03-04T03:31:00","slug":"accessible-vertical-tabs-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/","title":{"rendered":"Accessible Vertical Tabs in JavaScript"},"content":{"rendered":"

This JavaScript code snippet helps you to create accessible vertical tabs for easy content navigation. It organizes content into tabs. It enables switching between content sections by clicking. The method ensures active tab visibility while hiding others, aiding content accessibility.<\/p>\n

You can use this code in websites or web applications requiring organized content sections. It simplifies navigation by grouping related information into tabs. It enhances user experience by allowing easy access to specific content without overwhelming the interface.<\/p>\n

How to Create Accessible Vertical Tabs in JavaScript<\/h2>\n

1. Start by structuring your HTML to define the content and tabs. Use <ul><\/code> for indexes and tabs, each associated with specific content. Customize the content inside each tab.<\/p>\n

<main>\r\n  <header>\r\n    <h2><span>Table<\/span> of content<\/h2>\r\n  <\/header>\r\n  <section>\r\n    <ul class='indexes'>\r\n      <li data-index='0'>01<\/li>\r\n      <li data-index='1'>02<\/li>\r\n      <li data-index='2'>03<\/li>\r\n      <li data-index='3'>04<\/li>\r\n    <\/ul>\r\n    <ul class='tabs'>\r\n      <li class='tab'>\r\n        <article class='tab-content'>\r\n          <h3>Midnight Station<\/h3>\r\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.\r\n          Voluptas nihil sequi doloribus obcaecati. Aut vel, recusandae ipsa\r\n          voluptate blanditiis nemo magnam sit modi architecto officia\r\n          maiores magni. Necessitatibus, iste aut.<\/p>\r\n          <button>Read More<\/button>\r\n        <\/article>\r\n        <div class='tab-image'><img src='https:\/\/picsum.photos\/id\/345\/1000\/600'><\/div>\r\n      <\/li>\r\n      <li class='tab'>\r\n        <article class='tab-content'>\r\n          <h3>The Hitchhiker<\/h3>\r\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.\r\n          Voluptas nihil sequi doloribus obcaecati. Aut vel, recusandae ipsa\r\n          voluptate blanditiis nemo magnam sit modi architecto officia\r\n          maiores magni. Necessitatibus, iste aut.<\/p>\r\n          <button>Read More<\/button>\r\n        <\/article>\r\n        <div class='tab-image'><img src='https:\/\/picsum.photos\/id\/352\/1000\/600'><\/div>\r\n      <\/li>\r\n      <li class='tab'>\r\n        <article class='tab-content'>\r\n          <h3>Missing Pages<\/h3>\r\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.\r\n          Voluptas nihil sequi doloribus obcaecati. Aut vel, recusandae ipsa\r\n          voluptate blanditiis nemo magnam sit modi architecto officia\r\n          maiores magni. Necessitatibus, iste aut.<\/p>\r\n          <button>Read More<\/button>\r\n        <\/article>\r\n        <div class='tab-image'><img src='https:\/\/picsum.photos\/id\/444\/1000\/600'><\/div>\r\n      <\/li>\r\n      <li class='tab'>\r\n        <article class='tab-content'>\r\n          <h3>Uninvited Guests<\/h3>\r\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.\r\n          Voluptas nihil sequi doloribus obcaecati. Aut vel, recusandae ipsa\r\n          voluptate blanditiis nemo magnam sit modi architecto officia\r\n          maiores magni. Necessitatibus, iste aut.<\/p>\r\n          <button>Read More<\/button>\r\n        <\/article>\r\n        <div class='tab-image'><img src='https:\/\/picsum.photos\/id\/451\/1000\/600'><\/div>\r\n      <\/li>\r\n    <\/ul>\r\n  <\/section>\r\n<\/main><\/pre>\n
2. Now, apply CSS styles to make the tabs visually appealing and ensure they align properly. Customize the styling by adjusting CSS variables like --primary<\/code> for color and --overlay<\/code> for overlay transparency. Modify the CSS rules to match your overall website theme and branding.<\/p>\n
:root {\r\n  --primary: #d32626;\r\n  --overlay: rgba(211, 38, 38, 0.6);\r\n}\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\nbody {\r\n  height: 100vh;\r\n  display: grid;\r\n  place-items: center;\r\n  background-color: black !important;\r\n  color: rgba(255, 255, 255, 0.85);\r\n}\r\nmain {\r\n  width: 600px;\r\n  height: 300px;\r\n  font: 0.7rem impact, sans-serif;\r\n}\r\nmain header {\r\n  font-size: 1.2rem;\r\n  text-transform: uppercase;\r\n  margin-bottom: 2.25rem;\r\n  color: white;\r\n}\r\nmain header span {\r\n  color: var(--primary);\r\n}\r\nmain section {\r\n  display: flex;\r\n  gap: 2rem;\r\n}\r\n.indexes,\r\n.tabs {\r\n  list-style-type: none;\r\n}\r\n.indexes {\r\n  font-size: 1rem;\r\n}\r\n.indexes li {\r\n  padding: 1rem;\r\n  border: 1px solid transparent;\r\n  cursor: pointer;\r\n}\r\n.tabs {\r\n  position: relative;\r\n}\r\n.tab {\r\n  position: absolute;\r\n  display: flex;\r\n  width: 530px;\r\n  height: 225px;\r\n  opacity: 0;\r\n  background-color: black;\r\n  overflow: hidden;\r\n}\r\n.tab-content {\r\n  position: relative;\r\n  z-index: 5;\r\n  width: 300px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  gap: 1rem;\r\n  opacity: 0;\r\n  transform: translateY(-5rem);\r\n}\r\n.tab-content h3 {\r\n  font-family: helvetica;\r\n  font-weight: 900;\r\n  font-size: 1rem;\r\n  border-bottom: 1.5px solid white;\r\n  padding-bottom: 1rem;\r\n}\r\n.tab-content p {\r\n  font-family: helvetica;\r\n  font-weight: 100;\r\n  line-height: 2;\r\n  color: rgba(255, 255, 255, 0.7);\r\n}\r\n.tab-content button {\r\n  width: fit-content;\r\n  background-color: transparent;\r\n  color: white;\r\n  border: 1px solid white;\r\n  font-size: 0.7rem;\r\n  padding: 0.75rem 1rem;\r\n  cursor: pointer;\r\n}\r\n@keyframes content {\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n.tab-image {\r\n  position: absolute;\r\n  right: 1rem;\r\n  width: 200px;\r\n  height: 200px;\r\n  opacity: 0;\r\n  transform: translateX(2rem);\r\n}\r\n.tab-image::after {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background-color: var(--overlay);\r\n  mix-blend-mode: multiply;\r\n}\r\n.tab-image img {\r\n  width: inherit;\r\n  height: inherit;\r\n  object-fit: cover;\r\n  filter: grayscale(100%);\r\n}\r\n@keyframes image {\r\n  100% {\r\n    opacity: 1;\r\n    width: 300px;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n.active .tab {\r\n  opacity: 1;\r\n  z-index: 5;\r\n}\r\n.active .tab-content {\r\n  animation: content 0.9s ease-out 0.4s forwards;\r\n}\r\n.active .tab-image {\r\n  animation: image 1s ease-out forwards;\r\n}\r\n<\/pre>\n
3. Finally, include the following JavaScript code in your project, ensuring it’s loaded after the DOM has fully loaded. Use the indexes<\/code> and tabs<\/code> variables to reference your index list and tab elements.<\/p>\n
const indexes = document.querySelectorAll('.indexes li');\r\nconst tabs = document.querySelectorAll('.tab');\r\nconst contents = document.querySelectorAll('.tab-content');\r\n\r\nfunction reset() {\r\n  for (let i = 0; i < tabs.length; i++) {\r\n    indexes[i].style.borderColor = 'transparent';\r\n    tabs[i].style.zIndex = 0;\r\n    tabs[i].classList.remove('active');\r\n    contents[i].classList.remove('active');\r\n  }\r\n}\r\n\r\nfunction showTab(i) {\r\n  indexes[i].style.borderColor = 'rgba(211,38,38,0.6)';\r\n  tabs[i].style.opacity = 1;\r\n  tabs[i].style.zIndex = 5;\r\n  tabs[i].classList.add('active');\r\n  contents[i].classList.add('active');\r\n}\r\n\r\nfunction activate(e) {\r\n  if (!e.target.matches('.indexes li')) return;\r\n  reset();\r\n  showTab(e.target.dataset.index);\r\n}\r\n\r\nconst init = () => showTab(0);\r\n\r\nwindow.addEventListener('load',init,false);\r\nwindow.addEventListener('click',activate,false);<\/pre>\n
That’s all! hopefully, you have successfully created accessible vertical tabs in JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript code snippet helps you to create accessible vertical tabs for easy content navigation. It organizes content into tabs….<\/p>\n","protected":false},"author":1,"featured_media":9943,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[75],"class_list":["post-9933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript","tag-tabs"],"acf":[],"yoast_head":"\nAccessible Vertical Tabs in JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Accessible Vertical Tabs in JavaScript. You can view demo and download the source 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\/accessible-vertical-tabs-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessible Vertical Tabs in JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Accessible Vertical Tabs in JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/\" \/>\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-03-04T10:30:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Accessible-Vertical-Tabs-in-JavaScript.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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Accessible Vertical Tabs in JavaScript\",\"datePublished\":\"2024-03-04T10:30:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/\"},\"wordCount\":215,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Accessible-Vertical-Tabs-in-JavaScript.png\",\"keywords\":[\"Tabs\"],\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/\",\"name\":\"Accessible Vertical Tabs in JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Accessible-Vertical-Tabs-in-JavaScript.png\",\"datePublished\":\"2024-03-04T10:30:00+00:00\",\"description\":\"Here is a free code snippet to create a Accessible Vertical Tabs in JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Accessible-Vertical-Tabs-in-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Accessible-Vertical-Tabs-in-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Accessible Vertical Tabs in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#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\":\"Accessible Vertical Tabs in JavaScript\"}]},{\"@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":"Accessible Vertical Tabs in JavaScript — CodeHim","description":"Here is a free code snippet to create a Accessible Vertical Tabs in JavaScript. You can view demo and download the source 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\/accessible-vertical-tabs-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Accessible Vertical Tabs in JavaScript — CodeHim","og_description":"Here is a free code snippet to create a Accessible Vertical Tabs in JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-04T10:30:00+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Accessible-Vertical-Tabs-in-JavaScript.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":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Accessible Vertical Tabs in JavaScript","datePublished":"2024-03-04T10:30:00+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/"},"wordCount":215,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Accessible-Vertical-Tabs-in-JavaScript.png","keywords":["Tabs"],"articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/","url":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/","name":"Accessible Vertical Tabs in JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Accessible-Vertical-Tabs-in-JavaScript.png","datePublished":"2024-03-04T10:30:00+00:00","description":"Here is a free code snippet to create a Accessible Vertical Tabs in JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Accessible-Vertical-Tabs-in-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Accessible-Vertical-Tabs-in-JavaScript.png","width":1280,"height":960,"caption":"Accessible Vertical Tabs in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/accessible-vertical-tabs-in-javascript\/#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":"Accessible Vertical Tabs in JavaScript"}]},{"@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":1423,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9933","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=9933"}],"version-history":[{"count":1,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9933\/revisions"}],"predecessor-version":[{"id":11303,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9933\/revisions\/11303"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9943"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}