Very Simple Accordion In Pure Javascript (Free Download)

Welcome to a tutorial on how to create a simple accordion with pure Javascript. I am sure that the Internet has a bazillion accordion builds… But some of them are dependent on 3rd party frameworks, and just overall complicated. So in this guide, let us walk through a simple, no-fluff version – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TABLE OF CONTENTS

Download & Demo How It Works Useful Bits & Links
The End

 

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

ACCORDION DEMO

ALL TABS CAN OPEN

accordion.html
<!-- (A) CSS + JS -->
<link rel="stylesheet" href="accordion.css">
<script src="accordion.js"></script>
 
<!-- (B) ACCORDION HTML -->
<ol id="demoA">
  <li>Header One</li>
  <li>Contents One</li>
  <li>Header Two</li>
  <li>Contents Two</li>
  <li>Header Three</li>
  <li>Contents Three</li>
</ol>
 
<!-- (C) INITIALIZE -->
<script>
accordize(document.getElementById("demoA"));
</script>
  • Header One
  • Contents One
  • Header Two
  • Contents Two
  • Header Three
  • Contents Three

For those of you who just want to use this as a “plugin”:

  1. Load the CSS and JS. Doh.
  2. Create a “regular” HTML list. Does not matter if it is <ol> or <ul>. So long as it has at least one header and content tab.
  3. Run accordize(TARGET).

 

 

ONLY ONE TAB CAN OPEN AT A TIME

accordion.html
<ul id="demoB">
  <li>Header One</li>
  <li>Contents One</li>
  <li>Header Two</li>
  <li>Contents Two</li>
  <li>Header Three</li>
  <li>Contents Three</li>
</ul>
 
<!-- (C) INITIALIZE -->
<script>
accordize(document.getElementById("demoB"), true);
</script>
  • Header One
  • Contents One
  • Header Two
  • Contents Two
  • Header Three
  • Contents Three

accordize(TARGET, true), that’s all.

 

HOW IT WORKS

All right, let us go into a little more detail in this section, for you guys who want to “deep customize” the accordion.

 

THE JAVASCRIPT

accordion.js
function accordize (target, one) {
  // (A) ADD CSS CLASS TO TARGET
  target.classList.add("awrap");
 
  // (B) ATTACH ONCLICK
  let all = target.querySelectorAll("li");
  if (typeof one != "boolean") { one = false; }
  for (let i=0; i<all.length; i++) {
    if (i%2==0) {
      all[i].classList.add("ahead");
      if (one) {
        all[i].onclick = () => {
          for (let i=0; i<all.length; i+=2) {
            all[i].classList.remove("open");
          }
          all[i].classList.add("open");
        };
      } else {
        all[i].onclick = () => { all[i].classList.toggle("open"); };
      }
    } else { all[i].classList.add("abody"); }
  }
}

The entire accordion is contained within this accordize() function. It is a very simple function actually:

  • Add CSS classes.
    • .awrap to the list itself.
    • .ahead to the headers tabs.
    • .abody to the content tabs.
  • Attach an onclick function to all the ahead tabs – This will toggle .open to show the respective content tab.

Yes, CSS is the one driving the show/hide mechanism; We are simply toggling the .open CSS class using Javascript.

 

 

THE CSS

accordion.css
/* (A) ACCORDION WRAPPER */
.awrap {
  padding: 0;
  margin: 0;
  list-style: none;
}
 
/* (B) HEADER TAB */
/* (B1) TAB ITSELF */
.ahead {
  position: relative;
  cursor: pointer;
  padding: 10px;
  background: #bd1818;
  color: #fff;
  border-bottom: 2px solid #f2f2f2;
}
 
/* (B2) RIGHT ARROW */
.ahead:after {
  position: absolute;
  content: "\25b6";
  right: 10px;
  transition: transform 0.2s;
}
 
/* (C) CONTENT TAB */
/* (C1) TAB ITSELF - CLOSED BY DEFAULT */
.abody {
  overflow: hidden;
  transition: all 0.2s ease-out; 
  max-height: 0; 
  height: auto;
  background: #f2f2f2;
  color: #333;
}
 
/* (C2) OPEN TAB - DOWN ARROW */
.ahead.open:after { transform: rotate(90deg); }
 
/* (C3) OPEN TAB - SHOW CONTENT */
.ahead.open + .abody {
  max-height: 600px; 
  padding: 10px;
}

Mostly cosmetics, I will say. The important parts are:

  • (C1) Hide the content tabs by default – max-height: 0
  • (C3) Show the content tab after the user clicks on the header tab – .ahead.open + .abody { max-height: 600px }

 

 

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

OPEN A TAB BY DEFAULT

<ol id="demoA">
  <li>Header One</li>
  <li>Contents One</li>
  <li class="open">Header Two</li>
  <li>Contents Two</li>
</ol>

Just add open to the header tab that you want to open by default.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *