```js
var btn = document.querySelector('.btn');
var activePanel = document.querySelector('.active');
var hiddenPanel = document.querySelectorAll("section > div:not(.active)");
var i;

for (i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function() {
      var panel = this.nextElementSibling;
      var otherPanels = document.querySelectorAll("section > div:not(.active)");

      panel.classList.add('.active');
      otherPanels.classList.add('.hidden');

    }
  });

};
```

```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.btn {
  color: white;
  background-color: brown;
  cursor: pointer;
}

.panel {
  display: none;
}

.active {
  display: block;
}

.hidden {
  display: none;
}
```

```html
<body>
  <section id="accordion">
    <h3 class="btn">button1</h3>
    <div class="panel">panel1</div>

    <h3 class="btn">button2</h3>
    <div class="panel">panel2</div>

    <h3 class="btn">button3</h3>
    <div class="panel">panel3</div>

    <h3 class="btn">button4</h3>
    <div class="panel">panel4</div>
  </section>

</body>
```

Hello,

please I am trying to code a javascript accordion, but my code does not work

what I want to do is when I click on button, it shows its panel only by adding active class to this panel only and adding hidden class to all other panels at the same time

so when I click on button it toggles sliding up and down

and only one panel shows then when I click on other button it slide down its own panel and automatically slide up the other panel

please help and many thanks in advance