How to create an accordion in 5 lines with Javascript

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.

Contents

①HTML
②CSS
③Javascript
Demo
The full text of source code

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