How to create an Accordion using HTML, CSS, and Pure JavaScript?
In this tutorial, you will learn how to create an accordion using HTML, CSS, and Pure JavaScript. And we will not use any library to create this UI Component.
Accordions are very helpful for manage a large amount of content. With the help of the accordion, you can show the content to a user as per his wish.
If you want to see the Lvie Demo of this HTML Accordion, click on the following button –
HTML Code —
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion using HTML, CSS, & JavaScript - By W3jar.Com</title>
</head>
<body>
<div class="theContainer">
<div class="w3jar-accordion">
<ul class="panel">
<li class="wrap active"><a href="#" class="title">Title 1</a>
<ul class="sub-panel">
<li>Content 1</li>
</ul>
</li>
<li class="wrap"><a href="#" class="title">Title 2</a>
<ul class="sub-panel">
<li>Content 2</li>
</ul>
</li>
<li class="wrap"><a href="#" class="title">Title 3</a>
<ul class="sub-panel">
<li>Content 3</li>
</ul>
</li>
<li class="wrap"><a href="#" class="title">Title 4</a>
<ul class="sub-panel">
<li>Content 4</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>CSS Code —
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Muli", sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
color: #222222;
background-color: #f2f2f2;
padding: 20px;
overflow-x: hidden;
}
.theContainer {
max-width: 900px;
margin: 0 auto;
}
a {
color: inherit;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.w3jar-accordion .panel,
.w3jar-accordion .sub-panel {
margin: 0;
padding: 0;
list-style: none;
}
.w3jar-accordion .wrap {
background-color: #ffffff;
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
margin-bottom: 10px;
}
.w3jar-accordion .wrap:last-child {
margin: 0;
}
/* FOR BLACK THEME */
.w3jar-accordion .black .wrap {
background-color: #444444;
color: #bfbfbf;
}
.w3jar-accordion .black .title {
background-color: #333333;
color: #bfbfbf;
}
/* END OF BLACK THEME */
.w3jar-accordion .title {
display: block;
padding: 10px;
font-weight: bold;
font-size: 20px;
text-decoration: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.w3jar-accordion .title::after {
content: "+";
margin-left: 10px;
}
.w3jar-accordion .sub-panel {
display: none;
padding: 10px;
}
.w3jar-accordion .sup-wrap {
margin-bottom: 10px;
}
.w3jar-accordion .sup-wrap:last-child {
margin: 0;
}
.w3jar-accordion .active .sub-panel {
display: block;
}
.w3jar-accordion .active .title::after {
content: "-";
}JavaScript Code —
var allBtns = document.querySelectorAll('.w3jar-accordion .panel .wrap > .title');
var allEl = document.querySelectorAll('.w3jar-accordion .panel .wrap');
Array.from(allBtns).forEach(function (el) {
var parentEl = el.parentElement;
el.onclick = function () {
if (!parentEl.classList.contains('active')) {
Array.from(allEl).forEach(function (el) {
if (el.classList.contains('active')) {
el.classList.remove('active');
parentEl.classList.add('active');
}
});
}
};
});Black Theme —
To enable the the black theme just add black class in the following element –
<ul class="panel black">
...
</ul>
