{"id":959,"date":"2019-11-18T23:53:02","date_gmt":"2019-11-18T23:53:02","guid":{"rendered":"http:\/\/www.projectimmerse.com\/blog\/?p=959"},"modified":"2020-06-15T07:29:25","modified_gmt":"2020-06-15T07:29:25","slug":"accordion-menu-in-vanilla-javascript","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/","title":{"rendered":"Accordion Menu in Vanilla Javascript"},"content":{"rendered":"<p>I&#8217;m back in the mood for more Javascript, more specifically &#8220;<strong>vanilla javascript<\/strong>&#8221; &#8211; which is just a phrase for writing Javascript in it&#8217;s true form, free from any frameworks or libraries. I guess the only thing we would be dependent on would be the &#8220;Javascript Engine&#8221; itself and the available &#8220;API&#8217;s&#8221; available for our use. I think this is pretty cool, we can do a lot with just &#8220;vanilla javascript&#8221; alone.<\/p>\n<p>Now don&#8217;t get me wrong, frameworks and libraries are great &#8211; they take care of all the nitty gritty cross browser stuff but often come with unnecessary bloat or extra features that aren&#8217;t even utilized. Frameworks like ReactJS and VueJS manage DOM manipulation for you so you can offload having to manage a bunch of selectors. There are some key concepts to be learned in writing plain Javascript though, as we shall see &#8211; we can achieve the same functionality with much less code.<\/p>\n<p><!--more--><\/p>\n<h3>Below is what it&#8217;s going to look like<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/11\/accordion-menu-vanilla-javascript-example.png\" alt=\"\" width=\"749\" height=\"439\" class=\"aligncenter size-full wp-image-986\" srcset=\"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/11\/accordion-menu-vanilla-javascript-example.png 749w, https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/11\/accordion-menu-vanilla-javascript-example-300x176.png 300w\" sizes=\"auto, (max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p>\n<p>This post is based off a Youtube video that covers building an accordion menu in plain Javascript. I see similar videos like these a lot but this particular one explains things quite well so all the credit goes to <a href=\"https:\/\/www.youtube.com\/channel\/UCCx80DXQtbhYDg15mPJ923w\" title=\"Go Make Things\" target=\"_blank\" rel=\"noopener noreferrer\">Go Make Things<\/a> for creating the video. The actual video, you can find here &#8211; <a href=\"https:\/\/www.youtube.com\/watch?v=IQn_up6ZUkk\" title=\"Learn vanilla JS in about 10 minutes\" target=\"_blank\" rel=\"noopener noreferrer\">Learn vanilla JS in about 10 minutes<\/a>. Yeah, 10 minutes.<\/p>\n<h2>The Markup<\/h2>\n<p>I&#8217;ve intentionally omitted the standard HTML boilerplate stuff &#8211; I&#8217;m going to go straight into the body section of our HTML page so we can start dissecting some javascript. I&#8217;ve also condensed things a bit compared to the video.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Javascript Accordion&lt;\/title&gt;\r\n  \r\n&lt;style&gt;\r\n  .accordion {\r\n    display: none;\r\n  }\r\n\r\n  .accordion.active {\r\n    display: block;\r\n  }\r\n  \r\n&lt;\/style&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n\r\n&lt;body&gt;\r\n\r\n&lt;p&gt;&lt;a class=&quot;accordion-toggle&quot; title=&quot;&quot; href=&quot;#content-1&quot;&gt;Show More 1&lt;\/a&gt;&lt;\/p&gt;\r\n&lt;div class=&quot;accordion&quot; id=&quot;content-1&quot;&gt;\r\n&lt;p&gt;Content 1&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;p&gt;&lt;a class=&quot;accordion-toggle&quot; title=&quot;&quot; href=&quot;#content-1&quot;&gt;Show More 2&lt;\/a&gt;&lt;\/p&gt;\r\n&lt;div class=&quot;accordion&quot; id=&quot;content-2&quot;&gt;\r\n&lt;p&gt;Content 2&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;p&gt;&lt;a class=&quot;accordion-toggle&quot; title=&quot;&quot; href=&quot;#content-1&quot;&gt;Show More 3&lt;\/a&gt;&lt;\/p&gt;\r\n&lt;div class=&quot;accordion&quot; id=&quot;content-3&quot;&gt;\r\n&lt;p&gt;Content 3&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n\r\n\/\/ We will be adding javascript here... before the body tag\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>First things first, each accordion div section is set to &#8220;display: none&#8221; using CSS. There are three anchor links &#8211; Show More 1, Show More 2, Show More 3. We also have another class called &#8220;.accordion.active&#8221; to style accordions with the active class. Okay, pretty straightforward.<\/p>\n<h2>The Javascript<\/h2>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\ndocument.addEventListener('click', function(event) {\r\n\r\n     \/\/ use negation to select elements with class accordion-toggle\r\n    if (!event.target.classList.contains('accordion-toggle')) {\r\n      return;\r\n    }\r\n\r\n    var content = document.querySelector(event.target.hash);\r\n\r\n    if (!content) {\r\n      return;\r\n    }\r\n\r\n    \/\/ Show\/hide content\r\n    content.classList.toggle('active');\r\n\r\n    \/\/ Prevent default link behavior\r\n    event.preventDefault();\r\n  \r\n  }, false);\r\n\r\n<\/pre>\n<p>This is pretty much it &#8211; we&#8217;ve got a working accordion all written in plain Javascript. I think this is well written Javascript code and there&#8217;s a lot we can learn from it. I&#8217;ve included some comments above to emphasize on some key techniques for each piece of code.<\/p>\n<p>We can make this better though and I&#8217;m glad this feature is included in the video. What if we wanted to hide any open sections and keep the current one open? In my consulting work, I would often write this all in jQuery &#8211; but after checking out this javascript, they are extremely similar. So we will use the same code above but modify it a bit.<\/p>\n<h2>Implementing a True Accordion Functionality<\/h2>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\ndocument.addEventListener('click', function(event) {\r\n\r\n  if (!event.target.classList.contains('accordion-toggle')) {\r\n    return;\r\n  }\r\n\r\n  var content = document.querySelector(event.target.hash);\r\n\r\n  if (!content) {\r\n    return;\r\n  }\r\n\r\n  event.preventDefault();\r\n\r\n  \/\/ Check if our content area is already open\r\n  if (content.classList.contains('active')) {\r\n    content.classList.remove('active');\r\n    return;\r\n  }\r\n\r\n  \/\/ if not... then run the below...\r\n\r\n  \/\/ Get all the accordions\r\n  var accordions = document.querySelectorAll('.accordion');\r\n\r\n  for (var i = 0; i &lt; accordions.length; i++) {\r\n    accordions&#x5B;i].classList.remove('active');\r\n  }\r\n\r\n  content.classList.add('active');\r\n\r\n}, false);\r\n\r\n<\/pre>\n<p>Using vanilla Javascript, we&#8217;ve achieved the same accordion functionality we would with either jQuery Core or jQuery&#8217;s UI library. There are a lot of fundamental concepts to be learned here though from &#8220;<strong>if statements<\/strong>&#8220;, &#8220;<strong>the return keyword<\/strong>&#8220;, the &#8220;<strong>classList&#8221; API<\/strong>, and the &#8220;<strong>for loop<\/strong>&#8221; just to name a few. Remember to take your time, don&#8217;t rush and keep immersing yourself.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m back in the mood for more Javascript, more specifically &#8220;vanilla javascript&#8221; &#8211; which is just a phrase for writing Javascript in it&#8217;s true form, free from any frameworks or libraries. I guess the only thing we would be dependent on would be the &#8220;Javascript Engine&#8221; itself and the available &#8220;API&#8217;s&#8221; available for our use. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Accordion Menu in Vanilla Javascript&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1089,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[],"class_list":["post-959","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Accordion Menu in Vanilla Javascript - Project Immerse<\/title>\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.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accordion Menu in Vanilla Javascript - Project Immerse\" \/>\n<meta property=\"og:description\" content=\"I&#8217;m back in the mood for more Javascript, more specifically &#8220;vanilla javascript&#8221; &#8211; which is just a phrase for writing Javascript in it&#8217;s true form, free from any frameworks or libraries. I guess the only thing we would be dependent on would be the &#8220;Javascript Engine&#8221; itself and the available &#8220;API&#8217;s&#8221; available for our use. &hellip; Continue reading &quot;Accordion Menu in Vanilla Javascript&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Immerse\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-18T23:53:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-15T07:29:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/11\/accordion-menu-using-vanilla-javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alex Mercer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alex Mercer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/\"},\"author\":{\"name\":\"Alex Mercer\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\"},\"headline\":\"Accordion Menu in Vanilla Javascript\",\"datePublished\":\"2019-11-18T23:53:02+00:00\",\"dateModified\":\"2020-06-15T07:29:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/\"},\"wordCount\":826,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/accordion-menu-using-vanilla-javascript.png\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/\",\"name\":\"Accordion Menu in Vanilla Javascript - Project Immerse\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/accordion-menu-using-vanilla-javascript.png\",\"datePublished\":\"2019-11-18T23:53:02+00:00\",\"dateModified\":\"2020-06-15T07:29:25+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/accordion-menu-using-vanilla-javascript.png\",\"contentUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/accordion-menu-using-vanilla-javascript.png\",\"width\":750,\"height\":750,\"caption\":\"Accordion Menu in Vanilla Javascript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/accordion-menu-in-vanilla-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accordion Menu in Vanilla Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/\",\"name\":\"Project Immerse\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\",\"name\":\"Alex Mercer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/alex-mercer-author-150x150.png\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/alex-mercer-author-150x150.png\",\"contentUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/alex-mercer-author-150x150.png\",\"caption\":\"Alex Mercer\"},\"description\":\"Alex Mercer is a writer and contributor at Project Immerse, covering web design, WordPress, web development, SEO, digital strategy, emerging technology, and the evolving world of the web. His work focuses on practical ideas, useful tools, and approachable guidance that help creators, developers, and business owners build better digital experiences. Alex writes with a hands-on, curiosity-driven approach, exploring both established web practices and new technologies shaping how websites are designed, built, and discovered.\",\"sameAs\":[\"https:\\\/\\\/www.projectimmerse.com\"],\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/author\\\/projectimmerse\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Accordion Menu in Vanilla Javascript - Project Immerse","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.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Accordion Menu in Vanilla Javascript - Project Immerse","og_description":"I&#8217;m back in the mood for more Javascript, more specifically &#8220;vanilla javascript&#8221; &#8211; which is just a phrase for writing Javascript in it&#8217;s true form, free from any frameworks or libraries. I guess the only thing we would be dependent on would be the &#8220;Javascript Engine&#8221; itself and the available &#8220;API&#8217;s&#8221; available for our use. &hellip; Continue reading \"Accordion Menu in Vanilla Javascript\"","og_url":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/","og_site_name":"Project Immerse","article_published_time":"2019-11-18T23:53:02+00:00","article_modified_time":"2020-06-15T07:29:25+00:00","og_image":[{"width":750,"height":750,"url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/11\/accordion-menu-using-vanilla-javascript.png","type":"image\/png"}],"author":"Alex Mercer","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alex Mercer","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/#article","isPartOf":{"@id":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/"},"author":{"name":"Alex Mercer","@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5"},"headline":"Accordion Menu in Vanilla Javascript","datePublished":"2019-11-18T23:53:02+00:00","dateModified":"2020-06-15T07:29:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/"},"wordCount":826,"commentCount":0,"image":{"@id":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/11\/accordion-menu-using-vanilla-javascript.png","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/","url":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/","name":"Accordion Menu in Vanilla Javascript - Project Immerse","isPartOf":{"@id":"https:\/\/www.projectimmerse.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/11\/accordion-menu-using-vanilla-javascript.png","datePublished":"2019-11-18T23:53:02+00:00","dateModified":"2020-06-15T07:29:25+00:00","author":{"@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5"},"breadcrumb":{"@id":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/#primaryimage","url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/11\/accordion-menu-using-vanilla-javascript.png","contentUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/11\/accordion-menu-using-vanilla-javascript.png","width":750,"height":750,"caption":"Accordion Menu in Vanilla Javascript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.projectimmerse.com\/blog\/accordion-menu-in-vanilla-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.projectimmerse.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Accordion Menu in Vanilla Javascript"}]},{"@type":"WebSite","@id":"https:\/\/www.projectimmerse.com\/blog\/#website","url":"https:\/\/www.projectimmerse.com\/blog\/","name":"Project Immerse","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.projectimmerse.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5","name":"Alex Mercer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/09\/alex-mercer-author-150x150.png","url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/09\/alex-mercer-author-150x150.png","contentUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/09\/alex-mercer-author-150x150.png","caption":"Alex Mercer"},"description":"Alex Mercer is a writer and contributor at Project Immerse, covering web design, WordPress, web development, SEO, digital strategy, emerging technology, and the evolving world of the web. His work focuses on practical ideas, useful tools, and approachable guidance that help creators, developers, and business owners build better digital experiences. Alex writes with a hands-on, curiosity-driven approach, exploring both established web practices and new technologies shaping how websites are designed, built, and discovered.","sameAs":["https:\/\/www.projectimmerse.com"],"url":"https:\/\/www.projectimmerse.com\/blog\/author\/projectimmerse\/"}]}},"_links":{"self":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/comments?post=959"}],"version-history":[{"count":26,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/959\/revisions"}],"predecessor-version":[{"id":974,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/959\/revisions\/974"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/media\/1089"}],"wp:attachment":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/media?parent=959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/categories?post=959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/tags?post=959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}