js点击展开全文内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击展开全文</title>
<style>
    .content {
        max-height: 100px;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }
    .content.expanded {
        max-height: 500px; /* 或者设置为auto */
    }
</style>
</head>
<body>

<div class="content">
    这里是一段很长的文本内容...（省略部分内容）
</div>
<button id="toggleButton">展开全文</button>

<script>
document.getElementById('toggleButton').addEventListener('click', function() {
    var contentDiv = document.querySelector('.content');
    contentDiv.classList.toggle('expanded');
    this.textContent = contentDiv.classList.contains('expanded') ? '收起' : '展开全文';
});
</script>

</body>
</html>