In this tutorial, we will create neo brutalism ui accordion using Html CSS and JavaScript. To build a neo brutalism UI accordion using HTML, CSS and JavaScript, we need to organize our files. We can either make a folder for each language or have one folder with files labeled by their extension. Then, we can start writing the code for the accordion in each file.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neo Brutalism Accordion Using Html CSS and Javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
</body>
</html>
Now add accordion code in index.html.
HTML
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Accordion Item 1</div>
<div class="accordion-content">
<p>
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Accordion Item 2</div>
<div class="accordion-content">
<p>
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Accordion Item 3</div>
<div class="accordion-content">
<p>
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point.
</p>
</div>
</div>
</div>
CSS
.accordion {
width: 50%;
margin: 2em auto;
}
.accordion-item {
border: 2px solid #333;
border-radius: 5px;
margin-bottom: 1em;
overflow: hidden;
}
.accordion-header {
background-color: #ddd;
color: #333;
display: block;
padding: 1em;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
}
.accordion-content {
background-color: #333;
color: #ddd;
max-height: 0;
transition: max-height 0.2s ease-out;
overflow: hidden;
}
JavaScript
const headers = document.querySelectorAll(".accordion-header");
headers.forEach((header) => {
header.addEventListener("click", function () {
this.classList.toggle("active");
const content = this.nextElementSibling;
content.style.maxHeight
? (content.style.maxHeight = null)
: (content.style.maxHeight = content.scrollHeight + "px");
});
});
Jameel Rathore
Hello! My name is Jameel Rathore, and I’m excited to share insights on web development topics. With expertise in HTML, CSS, and WordPress, I blend creativity with technical know-how in every article. My goal is to offer valuable insights and tips,