{"id":19169,"date":"2017-11-23T16:15:58","date_gmt":"2017-11-23T14:15:58","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=19169"},"modified":"2017-12-19T12:56:35","modified_gmt":"2017-12-19T10:56:35","slug":"html5-accordion-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/","title":{"rendered":"HTML5 Accordion Example"},"content":{"rendered":"

In this article we will build an Accordion using HTML5 and a dash of JavaScript. The Accordion widget is quite useful when we want to present just a teaser at first and if this interests the user, we provide detailed information. Basically we have content which collapses or starts out as such allowing the user to expand and get into details if the teaser information tempts them.
\n 
\n 
\n 
\n 
\n 
\n 
\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n

1. Introduction<\/h2>\n

An accordion, also referred to as a Collapsible, allows us to accommodate large content in a way that makes it easy for the user to go directly to things of interest. With an accordion we hide verbose content initially till the user clicks on a teaser to reveal the entire content and in the same way the user is able to hide content by clicking on the teaser. This widget allows us to efficiently use the screen real estate. Some implementations allow for only one content node to be expanded at a time. In our example we are going to let the user decide on this point.<\/p>\n

2. Tools & Technologies<\/h2>\n
    \n
  1. HTML5<\/li>\n
  2. CSS3<\/li>\n
  3. JavaScript<\/li>\n
  4. Nodejs v6.3.0<\/a><\/li>\n
  5. Express<\/a><\/li>\n
  6. Visual Studio Code IDE<\/a><\/li>\n<\/ol>\n

    NodeJS, in essence, is JavaScript on the server-side. The Express module is used to create a barebones server to serve files and resources to the browser. I have used the Visual Studio Code IDE since I am the most familiar with it although you could others as per preference.<\/p>\n

    3. Project Layout<\/h2>\n

    The layout of our project is as shown in the screen grab below:<\/p>\n

    \"\"<\/a>
    Project Layout<\/figcaption><\/figure>\n

    CSS Folder<\/em><\/strong>
    \nThis folder hosts our CSS files, namely, html5.accordion.example.css<\/code>. We stylize our UI with classes in this file.
    \nJS Folder<\/em><\/strong>
    \nOur client side JavaScript files reside here. These are referenced in our HTML page(s).
    \nindex.js<\/em><\/strong>
    \nI have used NodeJS<\/code> and Express<\/code> module to spin up a barebones Web Server for this example.
    \nindex.html<\/em><\/strong>
    \nThis is our Markup file, it hosts the UI of this example.<\/p>\n

    4. Creating HTML Markup<\/h2>\n

    We start out with a basic HTML5 page and modify it as per our needs. The structure of markup for the accordion looks like below:<\/p>\n

    index.html<\/em><\/span><\/p>\n

    ...\r\n    <div class=\"accordion\">\r\n        <div class=\"accordion-item\">\r\n            <div class=\"item-header\">\r\n                First Header\r\n                <span>\u21e9<\/span>\r\n            <\/div>\r\n            <div class=\"item-content\">\r\n                <p>\r\n                    Content of the First Item.\r\n                    Content of the First Item.\r\n                    Content of the First Item.\r\n                    Content of the First Item.\r\n\r\n                   Content of the First Item.\r\n                <\/p>\r\n           <\/div>\r\n      <\/div>\r\n      <div class=\"accordion-item\">\r\n          <div class=\"item-header\">\r\n              Second Header\r\n              <span>\u21e9<\/span>\r\n         <\/div>\r\n         <div class=\"item-content\">\r\n             <p>\r\n                 Content of Second Item.\r\n                 Content of Second Item.\r\n                 Content of Second Item.\r\n                 Content of Second Item.\r\n\r\n                 Content of Second Item.\r\n             <\/p>\r\n        <\/div>\r\n   <\/div>\r\n   <div class=\"accordion-item\">\r\n       <div class=\"item-header\">\r\n           Third Header\r\n           <span>\u21e9<\/span>\r\n       <\/div>\r\n       <div class=\"item-content\">\r\n           <p>\r\n               Content of the Third Item.\r\n               Content of the Third Item.\r\n               Content of the Third Item.\r\n               Content of the Third Item.\r\n\r\n               Content of the Third Item.\r\n           <\/p>\r\n       <\/div>\r\n    <\/div>\r\n   ...\r\n<\/pre>\n
    5. CSS Classes<\/h2>\n
    Now that we have our markup ready we will stylize the same with the help of our css file. We add classes to collapse all our item-content<\/code> divs initially. We spruce up the UI by adding colors and some padding and margin as required. Our CSS file needs to look like this:<\/p>\n
    html5.accordion.example.css<\/em><\/span><\/p>\n
    .accordion{\r\n    max-width: 50%;\r\n}\r\n\r\n.item-header{\r\n    background-color: darkblue;\r\n    color: whitesmoke;\r\n    min-height: 20px;\r\n    border: 4px;\r\n    border-color: lightblue;\r\n}\r\n\r\n.item-content{\r\n    background-color: whitesmoke;\r\n    border-color: darkblue;\r\n    border-radius: 12px;\r\n    display: none;\r\n}\r\n\r\n.item-header span{\r\n    padding-right: 5px;\r\n    margin-bottom: 0px;\r\n    margin-top: 0px;\r\n    float: right;\r\n}\r\n\r\n.item-content p{\r\n    margin-top: 0px;\r\n    margin-bottom: 0px;\r\n    padding-top: 2px;\r\n    padding-bottom: 2px;\r\n}\r\n<\/pre>\n
    Finally we write the JavaScript to make things tick. We do so in our JavaScript file, viz., html5.accordion.example.js<\/code>. Our client side JavaScript should look like below:<\/p>\n
    html5.accordion.example.js<\/em><\/span><\/p>\n
    var accordion = document.getElementById('accordion');\r\nvar accordion_items = document.getElementsByClassName('accordion-item');\r\nvar item_headers = document.getElementsByClassName('item-header');\r\nvar item_contents = document.getElementsByClassName('item-content');\r\n\r\nfunction setupAccordion(){\r\n    Array.prototype.forEach.call(item_headers, (function(header){\r\n        header.addEventListener(\"click\", function(evt){\r\n            var src = evt.srcElement;\r\n            if(src.nextElementSibling.style.display === \"none\" || !src.nextElementSibling.style.display){\r\n               expandItem(evt);\r\n            } else {\r\n                collapseItem(evt);\r\n            }\r\n        });\r\n    }));\r\n}\r\nfunction expandItem(evt){\r\n    var src = evt.srcElement;\r\n    src.nextElementSibling.style.display = \"block\";\r\n}\r\nfunction collapseItem(evt){\r\n    var src = evt.srcElement;\r\n    src.nextElementSibling.style.display = \"none\";\r\n}\r\nsetupAccordion();\r\n<\/pre>\n
    In the above JavaScript we bind an event handler to each item-header<\/code> div to toggle visibility of the corresponding content node. We write code for this in the click<\/code> event handler.<\/p>\n
    6. Running the Project<\/h2>\n
    Now that we have everything setup let us go ahead and run the project and look at the output. Firstly, we need to run the following commands at the root of the project.<\/p>\n
    >npm install\r\n<\/pre>\n
    and<\/p>\n
    >node index.js\r\n<\/pre>\n
    Now we need to navigate to the URL http:\/\/localhost:8090\/index.html<\/code>, We should see the below screen:<\/p>\n
    \"\"<\/a>
    Index.html UI<\/figcaption><\/figure>\n
    If we click on any of the header elements it leads to the appearance of the content below it. The screen should look like below:<\/p>\n
    \"\"<\/a>
    Index.html UI<\/figcaption><\/figure>\n
    7. Download the Source Code<\/h2>\n
    That was HTML5 Accordion Example.<\/p>\n
    Download<\/strong>
    \nYou can download the full source code of this example here:     WCG — HTML5 Accordion Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
    In this article we will build an Accordion using HTML5 and a dash of JavaScript. The Accordion widget is quite useful when we want to present just a teaser at first and if this interests the user, we provide detailed information. Basically we have content which collapses or starts out as such allowing the user …<\/p>\n","protected":false},"author":213,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[58],"class_list":["post-19169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","tag-html5-2"],"yoast_head":"\nHTML5 Accordion Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this article we will build an Accordion using HTML5 and a dash of JavaScript. The Accordion widget is quite useful when we want to present just a\" \/>\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\/html5\/html5-accordion-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Accordion Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this article we will build an Accordion using HTML5 and a dash of JavaScript. The Accordion widget is quite useful when we want to present just a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-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:published_time\" content=\"2017-11-23T14:15:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T10:56:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-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=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\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\/html5\/html5-accordion-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\"},\"headline\":\"HTML5 Accordion Example\",\"datePublished\":\"2017-11-23T14:15:58+00:00\",\"dateModified\":\"2017-12-19T10:56:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/\"},\"wordCount\":607,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"keywords\":[\"html5\"],\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/\",\"name\":\"HTML5 Accordion Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2017-11-23T14:15:58+00:00\",\"dateModified\":\"2017-12-19T10:56:35+00:00\",\"description\":\"In this article we will build an Accordion using HTML5 and a dash of JavaScript. The Accordion widget is quite useful when we want to present just a\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Accordion 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\/9c939eb4c915443c7e493c813d979592\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Accordion Example - Web Code Geeks - 2026","description":"In this article we will build an Accordion using HTML5 and a dash of JavaScript. The Accordion widget is quite useful when we want to present just a","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\/html5\/html5-accordion-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Accordion Example - Web Code Geeks - 2026","og_description":"In this article we will build an Accordion using HTML5 and a dash of JavaScript. The Accordion widget is quite useful when we want to present just a","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-11-23T14:15:58+00:00","article_modified_time":"2017-12-19T10:56:35+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592"},"headline":"HTML5 Accordion Example","datePublished":"2017-11-23T14:15:58+00:00","dateModified":"2017-12-19T10:56:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/"},"wordCount":607,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","keywords":["html5"],"articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/","name":"HTML5 Accordion Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2017-11-23T14:15:58+00:00","dateModified":"2017-12-19T10:56:35+00:00","description":"In this article we will build an Accordion using HTML5 and a dash of JavaScript. The Accordion widget is quite useful when we want to present just a","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-accordion-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Accordion 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\/9c939eb4c915443c7e493c813d979592","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19169","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\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=19169"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19169\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=19169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=19169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=19169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}