Accordion Menu

TITLE : Accordion Menu Using HTML and CSS | No Framework

HTML :

<html>

<head>

<title>Accordian</title>

</head>

<body>

<div class="header"><p>Section 1</p></div>

Proin pulvinar vehicula turpis, eget dignissim quam ullamcorper sit amet. Maecenas vehicula consectetur lorem. Duis eu nunc id justo aliquam vulputate in quis sem. Quisque ac fermentum sapien. Curabitur elementum nulla nec dolor sodales, rhoncus congue nunc porttitor. Suspendisse lacinia eleifend lorem at mollis. Duis sed porta purus, ut vulputate ante. Maecenas id dapibus nunc. Praesent in gravida nulla. Donec nec pharetra lorem.

</p></div>

<div class="header"><p>Section 2</p></div>

Proin pulvinar vehicula turpis, eget dignissim quam ullamcorper sit amet. Maecenas vehicula consectetur lorem. Duis eu nunc id justo aliquam vulputate in quis sem. Quisque ac fermentum sapien. Curabitur elementum nulla nec dolor sodales, rhoncus congue nunc porttitor. Suspendisse lacinia eleifend lorem at mollis. Duis sed porta purus, ut vulputate ante. Maecenas id dapibus nunc. Praesent in gravida nulla. Donec nec pharetra lorem.

</p></div>

<div class="header"><p>Section 3</p></div>

Proin pulvinar vehicula turpis, eget dignissim quam ullamcorper sit amet. Maecenas vehicula consectetur lorem. Duis eu nunc id justo aliquam vulputate in quis sem. Quisque ac fermentum sapien. Curabitur elementum nulla nec dolor sodales, rhoncus congue nunc porttitor. Suspendisse lacinia eleifend lorem at mollis. Duis sed porta purus, ut vulputate ante. Maecenas id dapibus nunc. Praesent in gravida nulla. Donec nec pharetra lorem.

</p></div>

</body>

</html>

CSS :

*{

margin: 0;

padding: 0;

box-sizing: border-box;

color:#fff;

font-family: Futura Md BT;

}

body{

width:100%;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

margin: 150px 0;

}

.header {

width:80%;

background-color: #2EC4B6 ;

transition: 0.3s;

border-bottom: 1px solid #000;

}

.header p{

padding: 20px 25px;

font-size: 1.3em;

}

.content {

width:80%;

background-color: #03254E ;

transition: 0.3s;

overflow: hidden;

max-height: 0;

}

.content p{

width:80%;

padding: 20px 0;

margin: 0 auto;

font-size: 1.2em;

}

.header:hover,.active {

background-color: #3553FF ;

}

JavaScript :

var header = document.getElementsByClassName('header');

for (let i=0;i<header.length;i++){

header[i].addEventListener("click" , function() {

this.classList.toggle('active');

var content = document.querySelectorAll('.content');

content = this.nextElementSibling;

if(content.style.maxHeight) {

content.style.maxHeight = null;

}

else {

content.style.maxHeight = content.scrollHeight + 'px';

}

});

}