{"id":3169,"date":"2024-01-19T16:51:00","date_gmt":"2024-01-19T16:51:00","guid":{"rendered":"https:\/\/codehim.com\/?p=3169"},"modified":"2024-01-22T14:52:58","modified_gmt":"2024-01-22T09:52:58","slug":"simple-jquery-tabs-content-with-css3","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/","title":{"rendered":"Simple jQuery Tabs Content with CSS3"},"content":{"rendered":"<section class=\"cm-tb\">\n<div class=\"cm-row\">\n<p class=\"plugin-intro\">An ultra lightweight jQuery plugin to create simple tabs content. You just need to set tabs name list and their contents with unique id. The plugin uses hash link id to switch tab when click on its name.   <\/p>\n<p>The tabs penal can be fully customize with CSS according to your needs. <\/p>\n<\/p><\/div>\n<\/section>\n<section class=\"codehim-wrapper\">\n<div class=\"d-row\">\n<h2>Plugin Preview<\/h2>\n<figure class=\"item-preview\"> <div id=\"featured-img-id\"><img decoding=\"async\" src=\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/06\/jquery-tabbed-panel.jpg\" alt=\"Simple jQuery Tabs Content with CSS3\" \/><\/div> <\/figure>\n<div class=\"item-like-share\"> <div class=\"codehim-share\"> <span class=\"share-title\">Share this:<\/span> <span class=\"share-btn-container\"> <\/span> <\/div> <\/div>\n<p><span class=\"small-text\"><a href=\"https:\/\/codehim.com\/how-to-start-using-jquery\/\"> How to start using jQuery?<\/a><\/span><\/p>\n<p><span class=\"large-text\"><a href=\"https:\/\/codehim.com\"> More jQuery Top, Best and New Plugins <\/a><\/span><\/p>\n<p><span class=\"small-text\"><a href=\"https:\/\/codehim.com\/tag\/top-100\/\"> Top 100 jQuery Plugins<\/a><\/span><\/p>\n<\/div>\n<div class=\"d-row\">\n<h2> Plugin Overview<\/h2>\n<table class=\"plugin-overview\">\n<tbody>\n<tr>\n<td><i class=\"fa fa-plug\"><\/i> Plugin:<\/td>\n<td>Tabbed Panel<\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-user\"><\/i> Author:<\/td>\n<td>Stanislav Andreev<\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-file-text-o\"><\/i> Licence:<\/td>\n<td><a href=\"https:\/\/opensource.org\/licenses\/MIT\" class=\"external\" target=\"_blank\" rel=\"noopener noreferrer\"> MIT Licence<\/a><\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-calendar-check-o\"><\/i> Published:<\/td>\n<td class=\"publish-date\">January 19, 2024<\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-github\"><\/i>Repository:<\/td>\n<td> <a href=\"https:\/\/github.com\/stenlidrumer\/jquery-tabbed-panel\" target=\"_blank\" class=\"external\" rel=\"noopener noreferrer\">Fork on GitHub <\/a><\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-link\"><\/i> Dependencies:<\/td>\n<td><a href=\"https:\/\/jquery.com\/download\/\" target=\"_blank\" class=\"external\" rel=\"noopener noreferrer\">jQuery 1.3.1 <\/a> or Latest version<\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-file-code-o\"><\/i> File Type:<\/td>\n<td>zip archive (HTML, CSS &#038; JavaScript )<\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-file-archive-o\"><\/i> Package Size:<\/td>\n<td>3.4 KB <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"cd-action\"><a class=\"btn demo\" target=\"_blank\" href=\"\/demo\/jquery-tabbed-panel\/\" rel=\"nofollow noopener noreferrer\"> Demo <\/a><a class=\"btn download\" href=\"\/download\/jquery-tabbed-panel.zip\" rel=\"nofollow\"> Download<\/a><\/div>\n<\/div>\n<\/section>\n<h2> How to Make Simple jQuery Tabs<\/h2>\n<p>1. Load the jQuery JavaScript library and <code>tabs.js<\/code> file into your HTML page.<\/p>\n<pre class=\"prettyprint lang-html\">\r\n &lt;!-- jQuery --&gt;\r\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.4.1.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;!-- Tabs Js --&gt;\r\n&lt;script src=\"js\/tabs.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>2. Create markup structure for tabs as follows:<\/p>\n<pre class=\"prettyprint lang-html\">\r\n&lt;section class=\"page\"&gt;\r\n   &lt;div class=\"tabs\"&gt;\r\n      &lt;ul class=\"tab-list\"&gt;\r\n         &lt;li class=\"active\"&gt;\r\n            &lt;a class=\"tab-control\" href=\"#tab-1\"&gt;\r\n               &lt;h3&gt;Tab 1&lt;\/h3&gt;\r\n            &lt;\/a&gt;\r\n         &lt;\/li&gt;\r\n         &lt;li&gt;\r\n            &lt;a class=\"tab-control\" href=\"#tab-2\"&gt;\r\n               &lt;h3&gt;Tab 2&lt;\/h3&gt;\r\n            &lt;\/a&gt;\r\n         &lt;\/li&gt;\r\n         &lt;li&gt;\r\n            &lt;a class=\"tab-control\" href=\"#tab-3\"&gt;\r\n               &lt;h3&gt;Tab 3&lt;\/h3&gt;\r\n            &lt;\/a&gt;\r\n         &lt;\/li&gt;\r\n      &lt;\/ul&gt;\r\n      &lt;div class=\"tab-panel active\" id=\"tab-1\"&gt;\r\n         &lt;p&gt;\r\n            These are contents of tab 1.\r\n         &lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"tab-panel\" id=\"tab-2\"&gt;\r\n         &lt;p&gt;\r\n            These are contents of tab 2.\r\n         &lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"tab-panel\" id=\"tab-3\"&gt;\r\n         &lt;p&gt;\r\n            These are contents of tab 3.\r\n         &lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n   &lt;\/div&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<p>3. Finally, style your tabs with CSS. <\/p>\n<pre class=\"prettyprint lang-css\">\r\n  \/********** TABS **********\/\r\n  .tab-list {\r\n    margin: 0;\r\n    padding: 0;}\r\n\r\n  .tab-list li {\r\n    display: inline-block;\r\n    list-style-type: none;\r\n    background-color: #303030;\r\n    border-top-left-radius: 1em;\r\n    border-top-right-radius: 1em;\r\n    font-family: 'Noto Sans HK', sans-serif;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.2em;}\r\n\r\n  .tab-list li a {\r\n    color: #f2f2f2;\r\n    display: block;\r\n    padding: 8px;}\r\n\r\n  .tab-list li.active, .tab-list li.hover {\r\n    background-color: #336699;\r\n    border-top-left-radius: 1em;\r\n    border-top-right-radius: 1em;}\r\n\r\n  .tab-list li.active a, .tab-list li a:hover {\r\n    color: #fff;\r\n    background-color: #336699;\r\n    border-top-left-radius: 1em;\r\n    border-top-right-radius: 1em;}\r\n\r\n  .tab-panel {\r\n    display: none;\r\n    background-color: #336699;\r\n    border-top-right-radius: 1em;\r\n    border-bottom-left-radius: 1em;\r\n    border-bottom-right-radius: 1em;\r\n    color: #fff;\r\n    min-height: 150px;\r\n    overflow: auto;}\r\n\r\n  .tab-panel.active {\r\n    display: block;}\r\n\r\n  .tab-panel p {\r\n    margin: 20px;}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>An ultra lightweight jQuery plugin to create simple tabs content. You just need to set tabs name list and their&#8230;<\/p>\n","protected":false},"author":1,"featured_media":3170,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[],"class_list":["post-3169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Simple jQuery Tabs Content with CSS3 &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free lightweight simple jQuery plugin to create tabs content. It uses CSS styles to creates tabs and switch tabs on jQuery click event.\" \/>\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\/html5-css3\/simple-jquery-tabs-content-with-css3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple jQuery Tabs Content with CSS3 &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free lightweight simple jQuery plugin to create tabs content. It uses CSS styles to creates tabs and switch tabs on jQuery click event.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/\" \/>\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-19T16:51:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:52:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/06\/jquery-tabbed-panel.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"962\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Simple jQuery Tabs Content with CSS3\",\"datePublished\":\"2024-01-19T16:51:00+00:00\",\"dateModified\":\"2024-01-22T09:52:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/\"},\"wordCount\":141,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/06\/jquery-tabbed-panel.jpg\",\"articleSection\":[\"HTML5 &amp; CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/\",\"name\":\"Simple jQuery Tabs Content with CSS3 &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/06\/jquery-tabbed-panel.jpg\",\"datePublished\":\"2024-01-19T16:51:00+00:00\",\"dateModified\":\"2024-01-22T09:52:58+00:00\",\"description\":\"Here is a free lightweight simple jQuery plugin to create tabs content. It uses CSS styles to creates tabs and switch tabs on jQuery click event.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/06\/jquery-tabbed-panel.jpg\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/06\/jquery-tabbed-panel.jpg\",\"width\":1280,\"height\":962,\"caption\":\"Simple jQuery Tabs Content with CSS3\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 &amp; CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Simple jQuery Tabs Content with CSS3\"}]},{\"@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 jQuery Tabs Content with CSS3 &#8212; CodeHim","description":"Here is a free lightweight simple jQuery plugin to create tabs content. It uses CSS styles to creates tabs and switch tabs on jQuery click event.","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\/html5-css3\/simple-jquery-tabs-content-with-css3\/","og_locale":"en_US","og_type":"article","og_title":"Simple jQuery Tabs Content with CSS3 &#8212; CodeHim","og_description":"Here is a free lightweight simple jQuery plugin to create tabs content. It uses CSS styles to creates tabs and switch tabs on jQuery click event.","og_url":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-19T16:51:00+00:00","article_modified_time":"2024-01-22T09:52:58+00:00","og_image":[{"width":1280,"height":962,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/06\/jquery-tabbed-panel.jpg","type":"image\/jpeg"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Simple jQuery Tabs Content with CSS3","datePublished":"2024-01-19T16:51:00+00:00","dateModified":"2024-01-22T09:52:58+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/"},"wordCount":141,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/06\/jquery-tabbed-panel.jpg","articleSection":["HTML5 &amp; CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/","url":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/","name":"Simple jQuery Tabs Content with CSS3 &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/06\/jquery-tabbed-panel.jpg","datePublished":"2024-01-19T16:51:00+00:00","dateModified":"2024-01-22T09:52:58+00:00","description":"Here is a free lightweight simple jQuery plugin to create tabs content. It uses CSS styles to creates tabs and switch tabs on jQuery click event.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/06\/jquery-tabbed-panel.jpg","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/06\/jquery-tabbed-panel.jpg","width":1280,"height":962,"caption":"Simple jQuery Tabs Content with CSS3"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/simple-jquery-tabs-content-with-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 &amp; CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Simple jQuery Tabs Content with CSS3"}]},{"@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":1901,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/3169","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=3169"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/3169\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/3170"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=3169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=3169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=3169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}