
In this article, I am going to describe about how to create an accordion with javascript in 5 lines.
I have prepared a Demo which can be touched at the lower.
①HTML
Firstly, prepare the accordion parts by HTML.
Just button and content in the div element which has accordion class.
<div class="accordion">
<p>Accordion Button1</p>
<p>Accordion Contents1</p>
</div>
<div class="accordion">
<p>Accordion Button2</p>
<p>Accordion Contents2</p>
<p>Accordion Contents2</p>
</div>
<div class="accordion">
<p>Accordion Button3</p>
<p>
Accordion Contents3<br>
Accordion Contents3<br>
Accordion Contents3<br>
</p>
</div>
②CSS
Let’s apply the styles for accordion.
Add color and arrows to the button.
13th~24th line is important for accordion animation.
The padding property at 15th and 22th line is important to move accordion smoothly.
.accordion{
margin: 0 0 20px;
}
.accordion p{
padding: 10px;
border: 1px solid;
margin: 0 0 -1px;
}
.accordion p:first-child{
cursor: pointer;
background: #FFD54F;
}
.accordion p:not(:first-child){
height: 0;
padding: 0 10px;
visibility: hidden;
overflow: hidden;
transition: 0.4s;
}
.accordion.open p:not(:first-child){
height: auto;
padding: 10px;
visibility: visible;
}
.accordion p:first-child::after{
content: '▼';
float: right;
}
.accordion.open p:first-child::after{
content: '▲';
}
③Javascript
Register the click events to all accordions.
That is very simple one which is adding open class when accordion buttons are clicked.
document.querySelectorAll('.accordion').forEach(function(elem){
elem.querySelector('p').addEventListener('click',function(){
elem.classList.toggle('open')
})
})
Demo
I have prepared a Demo which can be touched.
Accordion will be open when you click the buttons.
Accordion Button1
Accordion Contents1
Accordion Button2
Accordion Contents2
Accordion Contents2
Accordion Button3
Accordion Contents3
Accordion Contents3
Accordion Contents3
The full text of source code
In the end, I put the full text of source code.
<div class="accordion">
<p>Accordion Button1</p>
<p>Accordion Contents1</p>
</div>
<div class="accordion">
<p>Accordion Button2</p>
<p>Accordion Contents2</p>
<p>Accordion Contents2</p>
</div>
<div class="accordion">
<p>Accordion Button3</p>
<p>
Accordion Contents3<br>
Accordion Contents3<br>
Accordion Contents3<br>
</p>
</div>
<style>
.accordion{
margin: 0 0 20px;
}
.accordion p{
padding: 10px;
border: 1px solid;
margin: 0 0 -1px;
}
.accordion p:first-child{
cursor: pointer;
background: #81C784;
}
.accordion p:not(:first-child){
height: 0;
padding: 0 10px;
visibility: hidden;
overflow: hidden;
transition: 0.4s;
}
.accordion.open p:not(:first-child){
height: auto;
padding: 10px;
visibility: visible;
}
.accordion p:first-child::after{
content: '▼';
float: right;
}
.accordion.open p:first-child::after{
content: '▲';
}
</style>
<script>
document.querySelectorAll('.accordion').forEach(function(elem){
elem.querySelector('p').addEventListener('click',function(){
elem.classList.toggle('open')
})
})
</script>
That is all, it was about how to create an accordion with javascript in 5 lines.