アコーディオンの中の高さを再取得したい。

Question

https://codepen.io/aaronbushnell/pen/eGVdzv/
上記のサイトを参考にslideDown・slideUpを使わないアコーディオンを作成しました。
アコーディオンの中の高さ取得で1点不具合があります。アコーディオンの中にアコーディオンがあるパターンがあるのですが
どちらも開いて、どちらも閉じて再度アコーディオンを開くとどちらの高さが残ったままとなり、
開く動きが早くなってしまいます。高さをリセットするような処理が必要になると思うのですが
どう処理をしていいかわかりません。リセットすることで動きが同じになるのではと思っています。

わかる方がいましたら、教えていただけますでしょうか。

<div class="c-accordion js-accordion is-active">
	<button type="button" class="c-accordion__trigger js-accordion__trigger">
		<span class="c-headline-lv2">アコーディオンタイトル</span>
	</button>
	<div class="c-accordion__panel js-accordion__panel">
		<div class="c-accordion__content">
			<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
		</div>
	</div>
</div>
<div class="c-accordion js-accordion">
	<button type="button" class="c-accordion__trigger js-accordion__trigger">
		<span>アコーディオンタイトル</span>
	</button>
	<div class="c-accordion__panel js-accordion__panel">
		<div class="c-accordion__content">
			<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
		</div>
		<!--アコーディオンの中にアコーディオンがある場合-->
		<div class="c-accordion js-accordion">
			<button type="button" class="c-accordion__trigger js-accordion__trigger">
				<span>アコーディオンタイトル</span>
			</button>
			<div class="c-accordion__panel js-accordion__panel">
				<div class="c-accordion__content">
					<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
				</div>
			</div>
		</div>
	</div>
</div>

[class*="js-accordion"]:not([data-accordion-device="sp"]) .js-accordion__trigger {
    cursor: pointer;
}

[class*="js-accordion"]:not([data-accordion-device="sp"]).is-hidden .js-accordion__panel {
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

[class*="js-accordion"]:not([data-accordion-device="sp"]) .js-accordion__panel {
    overflow: hidden;
    transition: 0.5s max-height;
    will-change: max-height;
}

.c-accordion {
    border: #ddd 1px solid;
}

.c-accordion + .c-accordion {
    margin-top: -1px;
}

.c-accordion__trigger {
    position: relative;
    width: 100%;
    padding: 15px 60px 15px 20px;
    font-weight: bold;
    background-color: #555;
    color: #fefefe;
}

.c-accordion__content {
    padding: 20px;
}

class Accordion {
	constructor(element) {
		this.element = element;
		this.tabs = this.element.querySelector('.js-accordion__trigger');
		this.panels = this.element.querySelector('.js-accordion__panel');
		this.isOpen = false;
		this.height = 0;
		this.events();
		this.close();
	}
	events() {
		this.tabs.addEventListener('click', this.handleClick.bind(this));
		this.panels.addEventListener('transitionend', this.handleTransition.bind(this));
	}
	handleClick() {
		this.height = this.panels.scrollHeight;
		console.log(this.height);
		if (this.isOpen) {
			this.close();
		} else {
			this.open();
		}
	}
	open() {
		this.isOpen = true;
		this.element.classList.add('is-active');
		this.element.classList.remove('is-hidden');
		this.panels.style.maxHeight = `${0}px`;
		this.tabs.setAttribute('aria-expanded', "true");
		this.panels.setAttribute('aria-hidden', "false");
		setTimeout(() => {
			this.panels.style.maxHeight = `${this.height}px`;
		}, 1);
	}
	close() {
		this.isOpen = false;
		this.element.classList.remove('is-active');
		this.panels.style.maxHeight = `${this.height}px`;
		this.tabs.setAttribute('aria-expanded', "false");
		this.panels.setAttribute('aria-hidden', "true");
		setTimeout(() => {
			this.panels.style.maxHeight = `${0}px`;
		}, 1);
	}
	handleTransition() {
		if (!this.isOpen) {
			this.element.classList.add('is-hidden');
		}
		this.panels.style.maxHeight = '';
	}
}
Array.from(document.querySelectorAll('.js-accordion:not(.js-accordion-one)')).forEach((el) => {
	new Accordion(el, {
		tabs: this.tabs,
		panels: this.panels
	});
});

Answer 1

下記とすることで解決しました。

handleClick() {
	if (this.isOpen) {
		this.close();
	} else {
		this.open();
		this.height = this.panels.scrollHeight;
		console.log(this.height);
	}
}

Answer 2

他の箇所で不具合出るかもしれないですが、以下のようにするとどうですか？

handleTransition() {
  if (!this.isOpen) {
      this.element.classList.add('is-hidden');
  }else{
    this.panels.style.maxHeight = '';
  }
}

Comments

[noel0718]

ありがとうございます。
以下で解決いたしました。

```javascript
handleClick() {
if (this.isOpen) {
this.close();
} else {
this.open();
this.height = this.panels.scrollHeight;
}
}
```

[Lhankor_Mhy]

ご解決されて何よりです。

自己解決の処理をお願いします。

[noel0718]

記載しました。
こちらのコメントではコードの挿入ができないのですね・・。