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!

 

 

TABLE OF CONTENTS

 

 

ALL TABS CAN OPEN

<!-- (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

<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.

 

 

THE JAVASCRIPT

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

/* (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 }

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

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.

 

HTML DETAILS-SUMMARY ALTERNATIVE

<details>
  <summary>HEADER</summary>
  <p>Text content here.</p>
</details>

For you guys who want a “pure native HTML accordion”, the laziest way is to use the <details> and <summary> tags.

 

LINKS & REFERENCES

• Too much Javascript? Here is the CSS-only accordion.
• Need something more “robust”? Here is a list of accordions.
• HTML Details Tag – MDN
• Example on CodePen – Accordion With JS CSS