{"id":7081,"date":"2015-09-21T12:15:36","date_gmt":"2015-09-21T09:15:36","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=7081"},"modified":"2017-12-21T16:14:09","modified_gmt":"2017-12-21T14:14:09","slug":"jquery-add-remove-class-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/","title":{"rendered":"jQuery Add\/Remove Class Example"},"content":{"rendered":"

In this example, we’ll go through jQuery .addClass()<\/code> and .removeClass()<\/code> methods. jQuery provides a seamless, easy and efficent way to add or remove classes to specific DOM elements and trigger these events on the various listening events it provides like click<\/code>, mouseover<\/code>, mouseleave<\/code> ect.<\/p>\n

These methods are very useful to dynamically change content based on your cases, and gives your website a rather interactive and engaging user experience. From changing styles and colors to animations, it provides powerful ways to get you going.<\/p>\n

You’ll be able to access these methods just by including the jQuery library in your HTML document.
\n 
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

1. Basic Document Setup<\/h2>\n

To begin, create a new HTML document and add the following basic syntax inside:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>jQuery Add\/Remove Class Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION  -->\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script src=\"jquery-1.11.3.min.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Also, let’s create some elements with classes and define properties for these classes in CSS. For now, there will be only one element and two classes:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div class=\"element\">I am going to get classes added or removed!<div>\r\n<\/pre>\n
For now, we’d have this view:
\n
\"Basic<\/a>
Basic Element View<\/figcaption><\/figure>
\nAlongside with this element, let’s add two classes, one for styling and another for shaping:<\/p>\n
\r\n<!-- STYLE SECTION  -->\r\n<style type=\"text\/css\">\r\n    .style {\r\n        font-family: \"Clear Sans\";\r\n        font-size: 1.5em;\r\n        color: #AE0001;\r\n        font-style: oblique;\r\n        padding: 1em;\r\n    }\r\n    .shape {\r\n        width: 25em;\r\n        height: 3em;\r\n        border: 0.1em solid #2c3e50;\r\n        margin: 5em;\r\n        line-height: 3em;\r\n        text-align: center;\r\n    }\r\n    .decoration {\r\n        text-decoration: underline;\r\n        font-size: 1.2em;\r\n        padding: 1em;\r\n        width: 15em;\r\n    }\r\n    .color {\r\n        color: #e74c3c;\r\n    }\r\n    .background {\r\n        background-color: #ecf0f1;\r\n        font-size: 1.2em;\r\n        padding: 1em;\r\n        width: 15em;\r\n    }\r\n<\/style>\r\n<\/pre>\n
Next, we’ll continue adding and removing classes that we have.<\/p>\n
2. .addClass() and .removeClass() Methods<\/h2>\n
2.1 Add Class<\/h3>\n
The addClass()<\/code> method adds the specified class(es) to each element in the set of matched elements:<\/p>\n
1. .addClass(\"className\")<\/code>, in which className<\/code> is a string containing one or more space-separated classes to be added to the class attribute of each matched element.<\/p>\n
2. .addClass(function)<\/code> in which className<\/code> A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.<\/p>\n
Now using jQuery, we can add a class to our .element<\/code>:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n    $('.element').addClass('style');\r\n<\/script>\r\n<\/pre>\n
Easy as that, just selected the DOM element and added a class.
\n
\"Element<\/a>
Element View after Adding the ‘style’ Class<\/figcaption><\/figure>
\nWe added the ‘.style’ class, the same goes for ‘.shape’ class and we’d have this view:
\n
\"Added<\/a>
Added the ‘.shape’ Class<\/figcaption><\/figure>
\nBut what is interesting, is that you can have more than one class added, just by leaving a blank space between them:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n    $('.element').addClass('style shape');\r\n<\/script>\r\n<\/pre>\n
\"Multiple<\/a>
Multiple Classes Added<\/figcaption><\/figure>\n
2.2 Remove Class<\/h3>\n
Similarily, .removeClass() removes a (or some) class\/es from an element. To show this, add a new HTML element:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<p class=\"decoration color background\">I need to get rid of some classes<\/p>\r\n<\/pre>\n
In the JS section, let’s remove two of these classes:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n    $('.element').addClass('style shape');\r\n<\/script>\r\n<\/pre>\n
The view we’d get is this:
\n
\"Remove<\/a>
Remove Class Method<\/figcaption><\/figure><\/p>\n
3. Adding or Removing Classes on Event Listeners<\/h2>\n
You can trigger classes only when a specific event listener happens to become true. Let’s add some elements:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<h2 class=\"decoration\">This is a click event add class.<\/h2>\r\n<\/pre>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n    $('article').hide();\r\n    $('h2').click(function(e){\r\n        e.preventDefault();\r\n        $(this).addClass('shape color');\r\n        $(this).removeClass('decoration');\r\n    });\r\n<\/script>\r\n<\/pre>\n
The result would be two classes added and one removed after click like so:
\n
\"Trigger<\/a>
Trigger Add or Remove Class on Event Listener!<\/figcaption><\/figure><\/p>\n
Toggle Classes on Event Listeners<\/h3>\n
You can use .toggleClass()<\/code> to toggle between the two states of an element, with and without classes like this:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n    $('article').hide();\r\n    $('h2').click(function(e){\r\n        e.preventDefault();\r\n        $(this).toggleClass('shape color');\r\n    });\r\n<\/script>\r\n<\/pre>\n
The result would be:
\n
\"Toggle<\/a>
Toggle Class Example<\/figcaption><\/figure><\/p>\n
4. Conclusion<\/h2>\n
To conclude, the jQuery methods for adding or removing classes are just right whenever it feels useful. You can actually add or remove content (by adding or removing classes), change the view on mouse or keyboard event ect. It is a process where you can try a lot and see how it best fits to what you want to achieve. I use it a lot when adding classes from a third party CSS stylesheet like an animation one, to animate elements mouseover<\/code> or mouseleave<\/code>. It is up to you.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: jQuery Add\/Remove Class<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
In this example, we’ll go through jQuery .addClass() and .removeClass() methods. jQuery provides a seamless, easy and efficent way to add or remove classes to specific DOM elements and trigger these events on the various listening events it provides like click, mouseover, mouseleave ect. These methods are very useful to dynamically change content based on …<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-7081","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"\njQuery Add\/Remove Class Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we'll go through jQuery .addClass() and .removeClass() methods. jQuery provides a seamless, easy and efficent way to add or remove\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Add\/Remove Class Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we'll go through jQuery .addClass() and .removeClass() methods. jQuery provides a seamless, easy and efficent way to add or remove\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-21T09:15:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T14:14:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery Add\/Remove Class Example\",\"datePublished\":\"2015-09-21T09:15:36+00:00\",\"dateModified\":\"2017-12-21T14:14:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/\"},\"wordCount\":631,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/\",\"name\":\"jQuery Add\/Remove Class Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-09-21T09:15:36+00:00\",\"dateModified\":\"2017-12-21T14:14:09+00:00\",\"description\":\"In this example, we'll go through jQuery .addClass() and .removeClass() methods. jQuery provides a seamless, easy and efficent way to add or remove\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery Add\/Remove Class Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Add\/Remove Class Example - Web Code Geeks - 2026","description":"In this example, we'll go through jQuery .addClass() and .removeClass() methods. jQuery provides a seamless, easy and efficent way to add or remove","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:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Add\/Remove Class Example - Web Code Geeks - 2026","og_description":"In this example, we'll go through jQuery .addClass() and .removeClass() methods. jQuery provides a seamless, easy and efficent way to add or remove","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-09-21T09:15:36+00:00","article_modified_time":"2017-12-21T14:14:09+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery Add\/Remove Class Example","datePublished":"2015-09-21T09:15:36+00:00","dateModified":"2017-12-21T14:14:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/"},"wordCount":631,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/","name":"jQuery Add\/Remove Class Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-09-21T09:15:36+00:00","dateModified":"2017-12-21T14:14:09+00:00","description":"In this example, we'll go through jQuery .addClass() and .removeClass() methods. jQuery provides a seamless, easy and efficent way to add or remove","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-add-remove-class-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery Add\/Remove Class Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=7081"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7081\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=7081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=7081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=7081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}