js文字展开收缩

<div id="textContainer">
    <p id="text">这是一段可以展开和收缩的文字示例。</p>
    <button id="toggleButton">展开</button>
</div>

#text {
    overflow: hidden;
    transition: max-height 0.5s ease;
    max-height: 50px; /* 初始高度 */
}

document.getElementById('toggleButton').addEventListener('click', function() {
    var textElement = document.getElementById('text');
    var button = document.getElementById('toggleButton');
    if (textElement.style.maxHeight === '50px' || !textElement.style.maxHeight) {
        textElement.style.maxHeight = textElement.scrollHeight + 'px';
        button.textContent = '收缩';
    } else {
        textElement.style.maxHeight = '50px';
        button.textContent = '展开';
    }
});