「続きを読む」を押すと下にサッと文字が出てくる処理(JavaScript)

document.addEventListener('DOMContentLoaded', function() {
	// 全ての詳細表示の要素について処理を行う
	var detailLinks = document.querySelectorAll('.show-details');
	detailLinks.forEach(function(detailLink) {
		detailLink.addEventListener('click', function() {
			var detailsElement = this.nextElementSibling;
			var offset_height = 20;
			// 現在の表示状態を確認して、反転させる
			if (detailsElement.style.maxHeight) {
				detailsElement.style.maxHeight = null; // リセット
			} else {
				detailsElement.style.maxHeight = detailsElement.scrollHeight + offset_height + 'px'; // 高さを設定
			}
		});
	});
});

.show-details {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
    display: inline-block;
}
.details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.details-border-box {
    border: 1px solid #000000;
    padding: 10px;
    line-height: 1.5;
    font-size: 1.0rem;
}