在ol标签中读取更多-更少

<button id="toggleButton">读取更多</button>
<ol id="orderedList">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <!-- 更多列表项 -->
</ol>

#orderedList li {
  display: none;
}
#orderedList li.show {
  display: list-item;
}

document.addEventListener('DOMContentLoaded', function() {
  const toggleButton = document.getElementById('toggleButton');
  const orderedList = document.getElementById('orderedList');
  let allShown = false;

  toggleButton.addEventListener('click', function() {
    if (allShown) {
      Array.from(orderedList.children).forEach(li => li.classList.remove('show'));
      toggleButton.textContent = '读取更多';
    } else {
      Array.from(orderedList.children).forEach(li => li.classList.add('show'));
      toggleButton.textContent = '读取更少';
    }
    allShown = !allShown;
  });
});

orderedList.addEventListener('transitionend', function() {
  window.scrollTo({ top: orderedList.offsetTop, behavior: 'smooth' });
});