js实现更多内容的收缩与展开效果

<div class="content">
    <button class="toggle-btn">显示更多</button>
    <div class="extra-content" style="display: none;">
        这里是额外的内容，点击按钮可以展开或收缩这部分内容。
    </div>
</div>

.content {
    margin: 20px;
}

.toggle-btn {
    padding: 10px;
    cursor: pointer;
}

.extra-content {
    padding: 10px;
    border: 1px solid #ccc;
}

document.addEventListener('DOMContentLoaded', function() {
    var toggleBtn = document.querySelector('.toggle-btn');
    var extraContent = document.querySelector('.extra-content');

    toggleBtn.addEventListener('click', function() {
        if (extraContent.style.display === 'none') {
            extraContent.style.display = 'block';
            toggleBtn.textContent = '收缩内容';
        } else {
            extraContent.style.display = 'none';
            toggleBtn.textContent = '显示更多';
        }
    });
});