Javascript Laravel-显示更多/更少按钮冲突

我有一个多重切换按钮，当我点击第一个切换按钮时出现问题，第二个按钮冻结，我必须双击它们

代码如下：

Javascript

钮扣

桌子

注 这个切换按钮是页面中的6个切换按钮中的7个，所有操作都正常，但是如果第一个切换按钮打开，我必须双击第二个切换按钮。 所有按钮的javascript都保持不变，我只是更改了元素和函数名的id。 有什么建议吗

替换可见=真；可见=假；然后重试

已解决

我已将条件替换为表格样式，其中它将检查是否显示等于无，然后显示其他隐藏

代码如下：

<script>

txt6 = document.getElementById("text6");
btn6 = document.getElementById("btn6");
convert8 = document.getElementById("convert8");
function toggle7() {

  if(document.getElementById("text6").style.display == 'none') {
    convert8.style.display = 'block';
    btn6.innerHTML = '<i class="fas fa-minus"></i> Show Less';
    txt6.style.display = 'table';

  } else {
    convert8.style.display = 'none';
    btn6.innerHTML = '<i class="fas fa-plus"></i> Show More ';
    txt6.style.display = 'none';
  }
}
</script>

---

谢谢你的建议：快乐编码

你在循环中使用按钮吗？@TanjaForsberg是的，但我有8个切换按钮，它们具有不同的函数名和元素。我认为元素ID在循环中重复。如果您可以创建一个JSFIDLE链接，这样我们就可以得到您的代码结构，那就更清楚了。功能之间有冲突

<button class="btn-hover color-1" id='btn6' onclick='toggle7()' style="float:left;"><i class="fas fa-plus"></i> Show More </button>

<table id='text6' style='display: none; '>
    <tr>test</test>
</table>

<script>

txt6 = document.getElementById("text6");
btn6 = document.getElementById("btn6");
convert8 = document.getElementById("convert8");
function toggle7() {

  if(document.getElementById("text6").style.display == 'none') {
    convert8.style.display = 'block';
    btn6.innerHTML = '<i class="fas fa-minus"></i> Show Less';
    txt6.style.display = 'table';

  } else {
    convert8.style.display = 'none';
    btn6.innerHTML = '<i class="fas fa-plus"></i> Show More ';
    txt6.style.display = 'none';
  }
}
</script>