如何将getElementById或QuerySelectorall用于无限数量的ID？ （创建切换按钮以显示/隐藏Divs）

Question

您可能会说，JavaScript Noob在这里，想知道是否有人可以帮助我清理此操作。请避免jQuery。

这是非常基本的：在该部分中有一个切换按钮，一部分内容和一个关闭按钮。默认情况下隐藏了内容，但是当单击“切换”按钮时，内容将变得可见，并且用户会自动滚动。单击“关闭”按钮时，内容部分消失了，并将用户自动滚动回到主部分，并使用所有切换按钮。

对于内容的各个部分，应重复此操作，每个独特的内容部分与其相应的切换按钮相关联。

jsfiddle： https：//jsfiddle.net.net/bythrees/bythrees/bythrees/bythrees/mw5nh1cd/mw5nh1cd/51cd/51/51/

>这是按预期的工作，但是有一种方法可以清理JavaScript，以便如果需要超过2个内容，它将自动发生，而无需添加另一个部分 - 切换3，切换4，切换5等 - 致JS？我正在研究QuerySelectorall（我不必使用ID，可以轻松使用类）和映射，但不知道如何使其工作。

这是我正在使用的代码。如果我必须为每个切换重复所有这些，则似乎很愚蠢，更改每个切换的数字。

document.addEventListener('DOMContentLoaded', function() {

  const toggle1 = document.getElementById('toggle-1');
  const toggleContent1 = document.getElementById('toggle-content-1');
  const closeContent1 = document.getElementById('close-toggle-1');

  const toggle2 = document.getElementById('toggle-2');
  const toggleContent2 = document.getElementById('toggle-content-2');
  const closeContent2 = document.getElementById('close-toggle-2');

  // Toggle 1

  if (toggle1) {
    toggle1.addEventListener('click', () => {
      toggleContent1.classList.toggle('show');
    });

    closeContent1.addEventListener('click', () => {
      toggleContent1.classList.remove('show');
    });
  }

  // Toggle 2

  if (toggle2) {
    toggle2.addEventListener('click', () => {
      toggleContent2.classList.toggle('show');
    });

    closeContent2.addEventListener('click', () => {
      toggleContent2.classList.remove('show');
    });
  }

});

提前致谢！