「hegiht:0」の要素をアニメーションさせる２大手法【html】

<!-- 開閉ボタン -->
<button  class="openBtn">開閉ボタン</button>

<!-- 開閉するコンテンツ -->
<div class="container">
	<div class="inr">
		<h1>タイトル</h1>
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>

/* 高さゼロのボックス */
.container {
	height: 0;
	overflow: hidden;
	transition: height 0.3s;
}

/* 「.open」クラスを付与すると 「hegiht:auto」 に変更 */
.container.open {
	height: auto;
}

.inr {
	background-color: #eefaff;
	padding:10px;
	display:block;
}

//ボタンを押したら、開閉コンテンツに「.open」クラスを追加
document.querySelector('.openBtn').addEventListener('click',(e)=> {
	document.querySelector('.container').classList.toggle('open');
})

document.querySelector('.openBtn').addEventListener('click',(e)=> {
	
	// 高さがゼロの要素を取得
	const container = document.querySelector('.container');
	
	// container要素の中身の高さを取得
	const height = document.querySelector('.inr').offsetHeight;
	if(container.classList.contains("open")) {
		container.classList.remove('open');
		
		// 閉じるときは高さをゼロにする
		container.style.height = "0";
	} else {
		container.classList.add('open');

		// 開くときは高さを付与する
		container.style.height = height+"px";
	}
})

  /* grid-template-rows: 0fr を指定 */
.container {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s;
}

/* 「open」クラス付与で、1fr; */
.container.open {
  grid-template-rows: 1fr;
}

/* overflow: hidden; */
.inr {
  background-color: #eefaff;
  overflow: hidden;
}