{"id":9558,"date":"2024-01-20T18:05:00","date_gmt":"2024-01-20T18:05:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9558"},"modified":"2024-01-22T16:05:46","modified_gmt":"2024-01-22T11:05:46","slug":"javascript-tab-navigation-with-indicator","status":"publish","type":"post","link":"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/","title":{"rendered":"JavaScript Tab Navigation with Indicator"},"content":{"rendered":"<p>Tabs are a great way to organize and display content on your website in an organized and user-friendly manner. This JavaScript code enables tab navigation with an indicator. It allows switching content by clicking tabs. The method hides and displays content panels, applying active styling to the selected tab.<\/p>\n<p>This code improves user experience by organizing and displaying information in an easily navigable way.<\/p>\n<h2>How to Create Tab Navigation With Indicator in JavaScript<\/h2>\n<p>1. First of all, load the <a href=\"https:\/\/necolas.github.io\/normalize.css\/\" target=\"_blank\" rel=\"noopener\">Normalize CSS<\/a> and Google Fonts by adding the following CDN links into the head tag of your HTML document.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:400,700\" rel=\"stylesheet\"&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\"&gt;\r\n<\/pre>\n<p>2. Create the HTML structure for your tabbed navigation system. The following code includes a container for tabs and content panels. You can customize the tab names and content as needed.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;div class=\"tabs\"&gt;\r\n\t&lt;nav class=\"tabs-nav\"&gt;\r\n\t\t&lt;ol class=\"nav-list\"&gt;\r\n\t\t\t&lt;li class=\"nav-item\"&gt;\r\n\t\t\t\t&lt;a href=\"#description\" class=\"nav-link\"&gt;Description&lt;\/a&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t&lt;li class=\"nav-item\"&gt;\r\n\t\t\t\t&lt;a href=\"#updates\" class=\"nav-link\"&gt;Updates&lt;\/a&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t&lt;li class=\"nav-item\"&gt;\r\n\t\t\t\t&lt;a href=\"#donations\" class=\"nav-link\"&gt;Donations&lt;\/a&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t&lt;\/ol&gt;\r\n\t&lt;\/nav&gt;\r\n\r\n\t&lt;div class=\"tabs-panels\"&gt;\r\n\t\t&lt;div class=\"tabs-panel\" id=\"description\" style=\"\"&gt;Here you will find the description.&lt;\/div&gt;\r\n\t\t&lt;div class=\"tabs-panel\" id=\"updates\" style=\"display: none;\"&gt;Here you will find updates.&lt;\/div&gt;\r\n\t\t&lt;div class=\"tabs-panel\" id=\"donations\" style=\"display: none;\"&gt;Here you will find\r\n\t\t\t&lt;a href=\"\"&gt;donations&lt;\/a&gt;.&lt;\/div&gt;\r\n\t&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>3. Now, include the following CSS code in the <code>&lt;style&gt;<\/code> section of your HTML document or in an external CSS file. This code defines the styling for your tabs and content panels. You can modify the styles to match your website&#8217;s design.<\/p>\n<pre class=\"prettyprint linenums lang-css\">*,\r\n*::before,\r\n*::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  padding: 0.5rem;\r\n  background: #ddd;\r\n  font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n}\r\n\r\nul,\r\nol {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.tabs {\r\n  max-width: 40rem;\r\n  margin: 2rem auto;\r\n}\r\n\r\n.nav-list {\r\n  display: flex;\r\n  background: #fff;\r\n  border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.nav-item {\r\n  flex: 0 0 8rem;\r\n}\r\n\r\n.nav-link {\r\n  display: block;\r\n  padding: 1rem;\r\n  border-top: 3px solid transparent;\r\n  text-decoration: none;\r\n  text-align: center;\r\n  color: inherit;\r\n  outline: none;\r\n}\r\n\r\n.nav-link:hover,\r\n.nav-link:focus,\r\n.nav-link:active,\r\n.nav-link--active {\r\n  font-weight: bold;\r\n}\r\n\r\n.nav-link--active {\r\n  border-top-color: sienna;\r\n}\r\n\r\n.tabs-panels {\r\n  background: #fff;\r\n}\r\n\r\n.tabs-panel {\r\n  padding: 2rem;\r\n}<\/pre>\n<p>4. Finally, copy the following JavaScript code and place it just before the closing <code>&lt;\/body&gt;<\/code> tag in your HTML document. This code is responsible for handling tab navigation and indicator functionality.<\/p>\n<pre class=\"prettyprint linenums lang-js\">const doc = document\r\nconst tabsPanels = [...doc.querySelectorAll('.tabs-panel')]\r\nconst navLinks = [...doc.querySelectorAll('.nav-link')]\r\n\r\nfunction hideTabsPanels() {\r\n  tabsPanels.forEach(panel =&gt; {\r\n    panel.style.display = 'none'\r\n  })\r\n}\r\n\r\nconst activeClassName = 'nav-link--active'\r\n\r\nfunction removeActiveStyle() {\r\n  navLinks.forEach(link =&gt; {\r\n    link.classList.remove(activeClassName)\r\n  })\r\n}\r\n\r\nfunction addActiveStyle(el) {\r\n  el.classList.add(activeClassName)\r\n}\r\n\r\nhideTabsPanels()\r\n\r\nconst hash = window.location.hash\r\n\r\nif (hash) {\r\n  const panelName = hash.slice(1)\r\n  doc.getElementById(panelName).style.display = ''\r\n  addActiveStyle(doc.querySelector('[href=\"#' + panelName + '\"]'))\r\n} else {\r\n  tabsPanels[0].style.display = ''\r\n  addActiveStyle(doc.querySelector('.nav-link'))\r\n}\r\n\r\nnavLinks.forEach(link =&gt; {\r\n  link.addEventListener('click', function() {\r\n    const panelName = this.href.slice(this.href.indexOf('#') + 1)\r\n    hideTabsPanels()\r\n    doc.getElementById(panelName).style.display = ''\r\n    removeActiveStyle()\r\n    addActiveStyle(this)\r\n  })\r\n})\r\n\r\nwindow.addEventListener('hashchange', function() {\r\n  hideTabsPanels()\r\n  const panelName = window.location.hash.slice(1)\r\n  doc.getElementById(panelName).style.display = ''\r\n  removeActiveStyle()\r\n  addActiveStyle(doc.querySelector('[href=\"#' + panelName + '\"]'))\r\n})<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully created Tab Navigation with Indicator using JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tabs are a great way to organize and display content on your website in an organized and user-friendly manner. This&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9569,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[38],"tags":[],"class_list":["post-9558","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-menu"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Tab Navigation with Indicator &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a JavaScript Tab Navigation with Indicator. 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\/menu\/javascript-tab-navigation-with-indicator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Tab Navigation with Indicator &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a JavaScript Tab Navigation with Indicator. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/\" \/>\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-20T18:05:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:05:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Tab-Navigation-with-Indicator.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\/menu\/javascript-tab-navigation-with-indicator\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"JavaScript Tab Navigation with Indicator\",\"datePublished\":\"2024-01-20T18:05:00+00:00\",\"dateModified\":\"2024-01-22T11:05:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/\"},\"wordCount\":228,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Tab-Navigation-with-Indicator.png\",\"articleSection\":[\"Menu &amp; Nav\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/\",\"url\":\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/\",\"name\":\"JavaScript Tab Navigation with Indicator &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Tab-Navigation-with-Indicator.png\",\"datePublished\":\"2024-01-20T18:05:00+00:00\",\"dateModified\":\"2024-01-22T11:05:46+00:00\",\"description\":\"Here is a free code snippet to create a JavaScript Tab Navigation with Indicator. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Tab-Navigation-with-Indicator.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Tab-Navigation-with-Indicator.png\",\"width\":1280,\"height\":960,\"caption\":\"JavaScript Tab Navigation with Indicator\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Menu &amp; Nav\",\"item\":\"https:\/\/codehim.com\/category\/menu\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Tab Navigation with Indicator\"}]},{\"@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":"JavaScript Tab Navigation with Indicator &#8212; CodeHim","description":"Here is a free code snippet to create a JavaScript Tab Navigation with Indicator. 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\/menu\/javascript-tab-navigation-with-indicator\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Tab Navigation with Indicator &#8212; CodeHim","og_description":"Here is a free code snippet to create a JavaScript Tab Navigation with Indicator. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-20T18:05:00+00:00","article_modified_time":"2024-01-22T11:05:46+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Tab-Navigation-with-Indicator.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\/menu\/javascript-tab-navigation-with-indicator\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"JavaScript Tab Navigation with Indicator","datePublished":"2024-01-20T18:05:00+00:00","dateModified":"2024-01-22T11:05:46+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/"},"wordCount":228,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Tab-Navigation-with-Indicator.png","articleSection":["Menu &amp; Nav"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/","url":"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/","name":"JavaScript Tab Navigation with Indicator &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Tab-Navigation-with-Indicator.png","datePublished":"2024-01-20T18:05:00+00:00","dateModified":"2024-01-22T11:05:46+00:00","description":"Here is a free code snippet to create a JavaScript Tab Navigation with Indicator. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Tab-Navigation-with-Indicator.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Tab-Navigation-with-Indicator.png","width":1280,"height":960,"caption":"JavaScript Tab Navigation with Indicator"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/menu\/javascript-tab-navigation-with-indicator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Menu &amp; Nav","item":"https:\/\/codehim.com\/category\/menu\/"},{"@type":"ListItem","position":3,"name":"JavaScript Tab Navigation with Indicator"}]},{"@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":1172,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9558","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=9558"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9558\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9569"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}