Neo Brutalism Accordion Using Html CSS and JavaScript

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,