【javascript】 active時のみアニメーション

javascript初心者です
恥ずかしながら質問させていただきます
下記を参考にアコーディオンを実装したいと思っています
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

document.getElementsByClassName("accordion")[0].click();

document.getElementsByClassName("accordion")[0].click();
一つ目だけ開けておきたく上記を加えました

これだけですとロード時に開くアニメーションが付いてしまいます
クリックしたときにだけアニメーションをにはどうしたらいいでしょうか

よろしくお願いいたします

行動規範の内容に同意します

回答1件

ベストアンサー

アニメーションのCSSを削除
アニメーションを別のクラスで定義
ページを読み込み、アコーディオンパネルを開く
すべてのパネルにアニメーションクラスを追加

といった感じで行けますね。

具体的には以下です。

CSS
1.panel {
2    padding: 0 18px;
3    background-color: white;
4    max-height: 0;
5    overflow: hidden;
6    /*transition: max-height 0.2s ease-out;　ここ削除*/
7}
8/*新しくクラスを追加*/
9.panelLoded{
10  transition: max-height 0.2s ease-out;
11}

javascript
1document.getElementsByClassName("accordion")[0];
2var acc = document.getElementsByClassName("accordion");
3var i;
4
5for (i = 0; i < acc.length; i++) {
6  acc[i].addEventListener("click", function() {
7    this.classList.toggle("active");
8    var panel = this.nextElementSibling;
9    if (panel.style.maxHeight) {
10      panel.style.maxHeight = null;
11    } else {
12      panel.style.maxHeight = panel.scrollHeight + "px";
13    }
14  });
15}
16
17/*ここでパネルを開く(まだアニメーションはしない)*/
18document.getElementsByClassName("accordion")[0].click();
19
20/*ページのロードが終わってからすべての.panelに.panelLodedのクラスを追加*/
21window.onload = function() {
22  [].forEach.call(document.getElementsByClassName("panel"),function(elm){
23    elm.classList.add("panelLoded");
24   });
25};