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

<div class="show-details" data-open="閉じる" data-close="続きを読む">続きを読む</div>
<div class="details">
<div class="details-border-box">
<p>
「日本語が含まれていない場合のみ処理を進めるように条件を追加しました。これにより、誤って不必要なデータを抽出しないようにしています。この処理を完了した後、次に実装するべき機能として、抽出結果を自動的にフィルタリングして重複を除去するロジックを追加する予定です。さらに、エラーハンドリングを強化することで、異常時に適切なメッセージを表示し、処理の中断やリトライを柔軟に行えるように改善したいと考えています。」
</p>
</div>
</div>

<div class="show-details" data-open="閉じる" data-close="詳細を見る">詳細を見る</div>
<div class="details">
<div class="details-border-box">
<p>
この機能は、ユーザーの操作をよりスムーズにするために追加されました。特に、直感的なUIを重視しており、初めて利用する方でも迷わずに使える設計になっています。また、今後はさらに改善を重ねて、より高い操作性と拡張性を提供していく予定です。
</p>
</div>
</div>

document.addEventListener('DOMContentLoaded', function () {
    const detailLinks = document.querySelectorAll('.show-details');

    detailLinks.forEach(function (trigger) {
        let textElement = trigger;

        // 初期テキストを保存
        if (textElement && !textElement.dataset.original) {
            textElement.dataset.original = textElement.textContent.trim();
        }

        trigger.addEventListener('click', function () {
            const detailsElement = trigger.nextElementSibling;
            const offset_height = 20;

            if (!detailsElement) return;

            if (detailsElement.style.maxHeight) {
                // 閉じる
                detailsElement.style.maxHeight = null;
                if (textElement) {
                    textElement.textContent = textElement.dataset.original;
                }
            } else {
                // 開く
                detailsElement.style.maxHeight = detailsElement.scrollHeight + offset_height + 'px';
                if (textElement) {
                    textElement.textContent = '閉じる';
                }
            }
        });
    });
});

.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;
}