如何实现多区块的Show/Hide按钮控制指定标题行的显示与隐藏？

我要实现可控制指定行显示隐藏的Show/Hide按钮，设置了两个各含5个标题的区块：

• 第一个区块需隐藏Title4和Title5，目前功能正常
• 第二个区块需隐藏Title3、Title4和Title5，但无法正常工作

试过getElementsByClassName等方法没解决，只有单个ID的场景能运行，原代码如下：

原JavaScript代码 #

visible = false;
txt = document.getElementById("text");
btn = document.getElementById("btn");
function toggle() {
  if(visible) {
    visible = 0;
    btn.innerHTML = 'Show';
    txt.style.display = 'none';
  } else {
    visible = 1;
    btn.innerHTML = 'Hide';
    txt.style.display = 'block';
  }
}

原CSS代码 #

.button {
background: lightblu;
padding: 0px;
}

.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 1px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: 'Courier New', monospace;
  margin: 1px 1px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: #2196F3; 
  border: px solid #04AA6D;
}

.button1:hover {
  background-color: #04AA6D;
  color: white;
}

原HTML代码 #

<! --- First section. Working like I want 4 and 5 title is hiding and show, text on button is changing to Show and Hide -- >
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title1</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title2</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title3</a>

<div id='text' style='display: none;'>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title4</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title5</a>
</div>

<button class="button button1"><span id='btn' onclick='toggle()'>Show</button>

<hr>
<! --- Two section. How make this section, work like first one ? Now i want hide Title 3,4,5 but dont know how make this ? -- >
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title1</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title2</a>

<div id='text' style='display: none;'>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title3</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title4</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title5</a>
</div>

<button class="button button1"><span id='btn' onclick='toggle()'>Show</button>

问题根源 #

1. ID重复：HTML中两个隐藏区块都用了id="text"，两个按钮的文本容器都用了id="btn"。ID在页面中必须唯一，getElementById只会返回第一个匹配的元素，导致第二个区块的按钮永远控制第一个区块的内容。
2. 全局变量冲突：visible、txt、btn都是全局变量，两个按钮共用同一组变量，状态会混乱。

修复方案 #

给每个区块分配唯一标识，让toggle函数根据目标区块动态处理状态，避免全局变量冲突。

修改后的HTML代码 #

<! --- 第一个区块：隐藏Title4和Title5 -- >
<p><a href="Link" target="_blank"><span style="color: #717171;">> Title1</a></p>
<p><a href="Link" target="_blank"><span style="color: #717171;">> Title2</a></p>
<p><a href="Link" target="_blank"><span style="color: #717171;">> Title3</a></p>

<div id='text-1' style='display: none;'>
  <p><a href="Link" target="_blank"><span style="color: #717171;">> Title4</a></p>
  <p><a href="Link" target="_blank"><span style="color: #717171;">> Title5</a></p>
</div>

<button class="button button1" onclick='toggle("text-1", this)'>Show</button>

<hr>
<! --- 第二个区块：隐藏Title3、Title4和Title5 -- >
<p><a href="Link" target="_blank"><span style="color: #717171;">> Title1</a></p>
<p><a href="Link" target="_blank"><span style="color: #717171;">> Title2</a></p>

<div id='text-2' style='display: none;'>
  <p><a href="Link" target="_blank"><span style="color: #717171;">> Title3</a></p>
  <p><a href="Link" target="_blank"><span style="color: #717171;">> Title4</a></p>
  <p><a href="Link" target="_blank"><span style="color: #717171;">> Title5</a></p>
</div>

<button class="button button1" onclick='toggle("text-2", this)'>Show</button>

修改后的JavaScript代码 #

function toggle(targetId, btnElement) {
  const txt = document.getElementById(targetId);
  if (txt.style.display === 'none') {
    btnElement.innerHTML = 'Hide';
    txt.style.display = 'block';
  } else {
    btnElement.innerHTML = 'Show';
    txt.style.display = 'none';
  }
}

CSS代码（无需修改） #

.button {
background: lightblu;
padding: 0px;
}

.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 1px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: 'Courier New', monospace;
  margin: 1px 1px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: #2196F3; 
  border: px solid #04AA6D;
}

.button1:hover {
  background-color: #04AA6D;
  color: white;
}

关键改进点 #

• 给每个隐藏区块设置唯一ID（text-1、text-2）
• 点击按钮时直接传递目标区块ID和按钮自身元素给toggle函数，避免全局变量依赖
• 直接通过按钮元素修改文本，不再使用重复的btn ID
• 用元素的当前display状态判断切换逻辑，不需要额外的全局状态变量

内容的提问来源于stack exchange，提问作者Algiz