Simple Pure Vanilla JavaScript Smooth Multi-Tab Accordion

Here you will know how to create a simple accordion (collapsible) element using only vanilla (pure) javascript without jQuery or any other library. You want to get your site as optimized as you can, so you need to avoid using jQuery or any other similar library for just simple elements like for example accordion when you can create an element like that without any problem in pure javascript.

For example, jQuery has more than 10000 rows of code, and the size of the minified version has 331kb. So avoiding it you will automatically save 331kb of space for your site. That maybe doesn’t look too much but on the web, world speed is very crucial.

There are many code snippets available online or on many other blogs and websites, but everyone cannot optimize your blog or website, so you need some optimized code snippets. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready-to-use code and paste it where you want.

Features:

1. Light Weight.
2. Pure JavaScript Code.
3. Cross Browser.
4. No External Files.
5. Fully Customizable.
6. Responsive.

How To Add Pure JavaScript Sliding Overlay Sidebar With Custom Open/Close Button?

There are a few easy and understandable steps to achieve your desired functionality that we are gonna share below. Follow each step perfectly.

CSS:

<style>
button.accordion {
width: 100%;
background-color: whitesmoke;
border: none;
outline: none;
text-align: left;
padding: 15px 20px;
font-size: 18px;
color: #333;
cursor: pointer;
transition: background-color 0.2s linear;
}
button.accordion:after {
content: '\f055';
font-family: "fontawesome";
font-size: 14px;
float: right;
}
button.accordion.is-open:after {
content: '\f056';
}
button.accordion:hover, button.accordion.is-open {
background-color: #ddd;
}
.accordion-content {
background-color: white;
border-left: 1px solid whitesmoke;
border-right: 1px solid whitesmoke;
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-in-out;
}
</style>

HTML:

<button class="accordion">First Accordion</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
</p>
</div>
<button class="accordion">Second Accordion</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
</p>
</div>
<button class="accordion">Third Accordion</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
</p>
</div>

JavaScript:

<script>
var accordions = document.getElementsByClassName("accordion");
for (var i = 0; i < accordions.length; i++) {
accordions[i].onclick = function() {
this.classList.toggle('is-open');
var content = this.nextElementSibling;
if (content.style.maxHeight) {
// accordion is currently open, so close it
content.style.maxHeight = null;
} else {
// accordion is currently closed, so open it
content.style.maxHeight = content.scrollHeight + "px";
}
}
}
</script>

Customization:

No need to customize it. Just copy-paste. Rest edit the code as per comments and need. Remember to add JavaScript after HTML code.

Troubleshooting the Errors:

Do it with concentration and patience. Check your all steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.