{"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":"

I’m back in the mood for more Javascript, more specifically “vanilla javascript<\/strong>” – which is just a phrase for writing Javascript in it’s true form, free from any frameworks or libraries. I guess the only thing we would be dependent on would be the “Javascript Engine” itself and the available “API’s” available for our use. I think this is pretty cool, we can do a lot with just “vanilla javascript” alone.<\/p>\n

Now don’t get me wrong, frameworks and libraries are great – they take care of all the nitty gritty cross browser stuff but often come with unnecessary bloat or extra features that aren’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 – we can achieve the same functionality with much less code.<\/p>\n

<\/p>\n

Below is what it’s going to look like<\/h3>\n

\"\"<\/p>\n

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 Go Make Things<\/a> for creating the video. The actual video, you can find here – Learn vanilla JS in about 10 minutes<\/a>. Yeah, 10 minutes.<\/p>\n

The Markup<\/h2>\n

I’ve intentionally omitted the standard HTML boilerplate stuff – I’m going to go straight into the body section of our HTML page so we can start dissecting some javascript. I’ve also condensed things a bit compared to the video.<\/p>\n

\r\n\r\n<html>\r\n<head>\r\n<title>Javascript Accordion<\/title>\r\n  \r\n<style>\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<\/style>\r\n\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n<p><a class="accordion-toggle" title="" href="#content-1">Show More 1<\/a><\/p>\r\n<div class="accordion" id="content-1">\r\n<p>Content 1<\/p>\r\n<\/div>\r\n\r\n<p><a class="accordion-toggle" title="" href="#content-1">Show More 2<\/a><\/p>\r\n<div class="accordion" id="content-2">\r\n<p>Content 2<\/p>\r\n<\/div>\r\n\r\n<p><a class="accordion-toggle" title="" href="#content-1">Show More 3<\/a><\/p>\r\n<div class="accordion" id="content-3">\r\n<p>Content 3<\/p>\r\n<\/div>\r\n\r\n\/\/ We will be adding javascript here... before the body tag\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
First things first, each accordion div section is set to “display: none” using CSS. There are three anchor links – Show More 1, Show More 2, Show More 3. We also have another class called “.accordion.active” to style accordions with the active class. Okay, pretty straightforward.<\/p>\n
The Javascript<\/h2>\n
\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
This is pretty much it – we’ve got a working accordion all written in plain Javascript. I think this is well written Javascript code and there’s a lot we can learn from it. I’ve included some comments above to emphasize on some key techniques for each piece of code.<\/p>\n
We can make this better though and I’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 – 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
Implementing a True Accordion Functionality<\/h2>\n
\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 < accordions.length; i++) {\r\n    accordions[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
Using vanilla Javascript, we’ve achieved the same accordion functionality we would with either jQuery Core or jQuery’s UI library. There are a lot of fundamental concepts to be learned here though from “if statements<\/strong>“, “the return keyword<\/strong>“, the “classList” API<\/strong>, and the “for loop<\/strong>” just to name a few. Remember to take your time, don’t rush and keep immersing yourself.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’m back in the mood for more Javascript, more specifically “vanilla javascript” – which is just a phrase for writing Javascript in it’s true form, free from any frameworks or libraries. I guess the only thing we would be dependent on would be the “Javascript Engine” itself and the available “API’s” available for our use. … <\/p>\n
Continue reading “Accordion Menu in Vanilla Javascript”<\/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":[1],"tags":[],"class_list":["post-959","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"\nAccordion 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’m back in the mood for more Javascript, more specifically “vanilla javascript” – which is just a phrase for writing Javascript in it’s true form, free from any frameworks or libraries. I guess the only thing we would be dependent on would be the “Javascript Engine” itself and the available “API’s” available for our use. … Continue reading "Accordion Menu in Vanilla Javascript"\" \/>\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=\"projectimmerse\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"projectimmerse\" \/>\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\":\"projectimmerse\",\"@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\",\"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\":\"projectimmerse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g\",\"caption\":\"projectimmerse\"},\"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’m back in the mood for more Javascript, more specifically “vanilla javascript” – which is just a phrase for writing Javascript in it’s true form, free from any frameworks or libraries. I guess the only thing we would be dependent on would be the “Javascript Engine” itself and the available “API’s” available for our use. … 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":"projectimmerse","twitter_card":"summary_large_image","twitter_misc":{"Written by":"projectimmerse","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":"projectimmerse","@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","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":"projectimmerse","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g","caption":"projectimmerse"},"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}]}}