How to use the for loop method to create a drop down or a FAQ section.
Tags: javascript, webdev, beginners, programming
Published: 2022-08-24 13:49:14

### For loop method

A few months ago, I had issues solving this "**[ Front-end mentor challenge](https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam)"** because I didn’t know how to use a **for-loop method**. After learning to use the for-loop method and the **toggle** class, it became a walk in the park. 

Yayyy!! 🎉 

I’m sure you are wondering how I did it. 

Well, that’s why I wrote this!
 Let’s dive right into it.

![mobile-design.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1661343915341/CuYPpECFb.jpg align="left")
### In HTML

**Step 1:**

Ensure each **question** and **answer** or each **dropdown** tag and its contents are in a common div.

**Step 2:**

Assign a **common class **to each drop-down tag or FAQ button. 

**Step 3:**

Assign a **common class** to each FAQ answer or the drop-down content.

Example: 

```
<div class="container">
  <div>
    <button class="tag"></button>
    <p class="answer"></p>
  </div>
  <div>
    <button class="tag"></button>
    <p class="answer"></p>
  </div>
  <div>
    <button class="tag"></button>
    <p class="answer"></p>
  </div>
  <div>
    <button class="tag"></button>
    <p class="answer"></p>
  </div>
  <div>
    <button class="tag"></button>
    <p class="answer"></p>
  </div>
</div>
```

### In JavaScript

**Step 4:**

Assign each given class to a querySelectorAll().

```
const btn = document.querySelectorAll('.tag');
const answer = document.querySelectorAll('.answer');
```

In this case, “btn” represents each button that has the class of "tag".

Now we bring in the for loop.

```
for (let i = 0; i < btn.length; i++) {
 
   } )}
```

Here, “i” represents a temporary variable that holds the current array index. This current array will run through the for loop method. Please note that it’s not compulsory to use the letter “i”. Any letter works just fine.
However, ensure that you don’t change it along the line.

The “btn.length” represents the length of the array and displays the “btn NodeList” as shown below. 
```
NodeList(5) [button.tag, button.tag, button.tag, button.tag, button.tag] length: 5
```
**Step 5:**

Add an event listener to the “btn” so on every “click” a function is carried out.
```
for (let i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', ()=>{
   } )}
```

To see if this works, test it with a console.log

```
for (let i = 0; i < btn.length; i++) {
  console.log(btn);
    btn[i].addEventListener('click', ()=>{
   } )}
```

**Step6:**

Add the toggle class

The toggle class moves from adding a class to removing a class on whatever event it is placed on.

```
for (let i = 0; i < button.length; i++) {
  console.log(button);
    button[i].addEventListener('click', ()=>{
        console.log('n');
        button[i].classList.toggle('display')
        answer[i].classList.toggle('show')
 
   } )}
```

To use a toggle class, you have to include the styling in the CSS file.
Just as the styles below

```
.display{
    transform: rotate(180deg);
 
}
.show{
    display: block;
}
```

So whenever you click on the buttons or the tag, the styling and the functionalities work.

I hope this was helpful. I’m open to comments and ways you implement the code.

Click here to view the front-end mentor [challenge](https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam)