js实现展开收起功能

<div id="content" class="content">
    这里是需要展开和收起的内容。
</div>
<button id="toggleButton">展开/收起</button>

.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.content.expanded {
    max-height: 500px; /* 根据内容调整 */
}

document.addEventListener('DOMContentLoaded', function() {
    var content = document.getElementById('content');
    var toggleButton = document.getElementById('toggleButton');

    toggleButton.addEventListener('click', function() {
        content.classList.toggle('expanded');
        toggleButton.textContent = content.classList.contains('expanded') ? '收起' : '展开';
    });
});