Build a Netflix like custom Accordion
Tags: javascript, css, html, frontend
Published: 2021-06-06 13:54:36

Recently I cloned the UI of Netflix's Landing Page using just React and Sass to practice CSS. Though it was simple, there were a lot of learning opportunities for someone like me to play with frontend development, and I quite enjoyed that challenge. Here's the link to the project if you are interested :  [Netflix Landing Page Clone](https://github.com/AyushSaini00/netflix-landing-page-clone). 

In this post, we will be focusing on a section that you might have already seen on many other online platforms and learn how to implement that. It is called **accordion**, not the piano one thought 😂.

## What is a web accordion?
It helps you manage collapsable content. They are useful when you want to toggle between hiding and showing a large amount of content.

This is what I built for the clone project:

![netflix accordion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lmh59mylm4tjbsvczhs.png)

If you click on one of the blocks, it would expand the content and look like this:

![netflix accordion 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s97xbtms17i65lq23ldh.png)
## Let's get building 🔨


> 
Note: For the sake of simplicity, I will use plain HTML, CSS, and Javascript to build this instead of React and Sass.

### ✏ First, let's create the structure of the accordion with HTML:

```html
<div class="qna">
  <button class="accordion">Question 1</button>
  <div class="panel panel-closed">
    <p>Answer of Question 1</p>
  </div>
  <button class="accordion">Question 2</button>
  <div class="panel panel-closed">
    <p>Answer of Question 2</p>
  </div>
  <button class="accordion">Question 3</button>
  <div class="panel panel-closed">
    <p>Answer of Question 3</p>
  </div>
  <button class="accordion">Question 4</button>
  <div class="panel panel-closed">
    <p>Answer of Question 4</p>
  </div>
</div>
```

![html accordion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fa2qec0hluifek54efv.png)

### 🎨 Now, we will add some basic styles and reset defaults with CSS:

```css
/* Centers horizontally */
.qna{
  max-width: 500px;
  margin: 0 auto;
}
/* Button default resets */
button{
  border: none;
  outline: none;
  cursor: pointer;
}
/* Styling the accordion buttons */
.accordion{
  width: 100%;
  background-color: #303030;
  color: #fff;
  font-size: 20px;
  padding: 18px 20px;
  margin-bottom: 1px;
  text-align: left;
  /*  To push the plus sign to the right  */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* adding the "plus" sign (+) */ 
.accordion::after{
  content: '\02795';
  font-size: 20px;
  color: #fff;
}

.panel{
  background-color: #303030;
  color: #fff;
  margin-bottom: 4px;
  overflow: hidden;
}
.panel > p {
  font-size: 20px;
  padding: 10px 20px;
}
.panel-closed{
  max-height: 0;
  overflow: hidden;
}
```
![css accordion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70odk2ua7daskdtqcfx2.png)

### ⚙ Adding Functionality with Javascript 

We should roughly note down what we want. When someone clicks on the accordion button, we would want to:
- show the panel below the accordion (with sliding down animation)
- change the "plus sign (+)" to something else, like a "cross sign (x)"
- auto close the previous panel if another button is clicked

Let's code that down, one by one:

Here, we can add a class `panel-open` and remove the `panel-closed` class on the panel div when someone clicks the accordion button and similarly do the opposite when the button is clicked again. We already have the closed class, let's write the open class:

```css
.panel-open{
  max-height: 700px;
}
```
Coding the class add and remove logic in javascript:

```js
let accordion = document.getElementsByClassName("accordion");
const totalAccordions = accordion.length;

for (let i = 0; i < totalAccordions; i++) {
  accordion[i].addEventListener("click", (e) => {
    let panel = e.target.nextElementSibling;
    
    if (panel.classList[1] === "panel-closed") {
      panel.classList.add("panel-open");
      panel.classList.remove("panel-closed");
    } else {
      panel.classList.add("panel-closed");
      panel.classList.remove("panel-open");
    }
  });
} 
```
This would toggle `max-height` property based on the click event on the accordion button.

Now, to change the plus sign to a cross sign, we can add another class to the accordion button on active state and javascript would handle that on the same click event handler function:

```css
/* active class for accordion, adds the "cross sign (x)" */
.accordion-active::after {
  content: "\274C";
}
```
After adding the js code:

```js
let accordion = document.getElementsByClassName("accordion");
const totalAccordions = accordion.length;

for (let i = 0; i < totalAccordions; i++) {
  accordion[i].addEventListener("click", (e) => {

  // toggle the class 'accordion-active' on accordion button
  e.target.classList.toggle("accordion-active");

    let panel = e.target.nextElementSibling;
    
    if (panel.classList[1] === "panel-closed") {
      panel.classList.add("panel-open");
      panel.classList.remove("panel-closed");
    } else {
      panel.classList.add("panel-closed");
      panel.classList.remove("panel-open");
    }
  });
} 
```

A more Clean way of doing that would be to use toggle instead to add and remove:

```js
let accordion = document.getElementsByClassName("accordion");
const totalAccordions = accordion.length;

for (let i = 0; i < totalAccordions; i++) {
  accordion[i].addEventListener("click", (e) => {

  // toggle the class 'accordion-active' on accordion button
  e.target.classList.toggle("accordion-active");

    let panel = e.target.nextElementSibling;
    
    if (panel.classList[1] === "panel-closed") {
      panel.classList.toggle("panel-open");
    } 
  });
} 
```

![demo accordion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/an5nun0yzu0fsfx4axuh.gif)

#### 🌈 Adding smooth slide down animation:

To make the sliding of the panel look smooth, we can also add a `transition` property that would look for the `max-height`, all we have to do is to add that on the `panel` class.

```css
.panel{
  transition: max-height .33s cubic-bezier(.5,0,.1,1);
}
```
Here's a nice visual comparison between the above `cubic-bezier` curve and a linear transition.

![demo accordion 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12g25eaxqx73ok9t9ji3.gif)

This is how it looks like after adding the transition property:

![demo accordion 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fkpgzav3g5wht4pzyga.gif)

We are almost done, but something is missing. Yep, the previous panel doesn't auto-close on opening a new panel. 

Let's create a function for that, this function would take in the currently open panel as an argument and close all the other open panels (if any) on opening another accordion.

```js
const closeAllExcept = (pan) => {
  for (let i = 0; i < totalAccordions; i++) {
    let panelToClose = accordion[i].nextElementSibling;
    if(panelToClose !== pan){
       accordion[i].classList.remove("accordion-active");
       panelToClose.classList.remove("panel-open");
    }
  }
}
```
We now need to invoke this function. Below is the final javascript code, you would also notice that I had moved the `accordion-active` class toggle code inside the `if` block because now `closeAllExcept` also has the control to toggle the class.

```js
let accordion = document.getElementsByClassName("accordion");
const totalAccordions = accordion.length;

for (let i = 0; i < totalAccordions; i++) {
  accordion[i].addEventListener("click", (e) => {
    let panel = e.target.nextElementSibling;
   
    if (panel.classList[1] === "panel-closed") {
      e.target.classList.toggle("accordion-active");
      panel.classList.toggle("panel-open");
      closeAllExcept(panel);
    }
  });
} 

const closeAllExcept = (pan) => {
  for (let i = 0; i < totalAccordions; i++) {
    let panelToClose = accordion[i].nextElementSibling;
    if(panelToClose !== pan){
       accordion[i].classList.remove("accordion-active");
       panelToClose.classList.remove("panel-open");
    }
  }
}
```
Hooray, it's working perfectly now 😍

![demo accordion 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otc1xvw4056m35jwckdi.gif)

It was fun building this, isn't it? 😎 If you want to play and mess around, here's a link to my [Codepen](https://codepen.io/AyushSaini00/pen/qBrYYWe) for this project. If you enjoyed reading this, let me know in the comments or reach out to me on Twitter [@AyushCodes](https://twitter.com/AyushCodes) 🙌

## 📖 Resources

- [w3 Schools Docs](https://www.w3schools.com/howto/howto_js_accordion.asp)
- [Netflix India Website](https://www.netflix.com/in)
- [An amazing tool to visualize cubic beziers](https://cubic-bezier.com/#.5,0,.1,1)