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

Question

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

这是代码：（

JavaScript

visible = true; //var that keeps track if the content is visible.
txt6 = document.getElementById("text6");
btn6 = document.getElementById("btn6");
convert8 = document.getElementById("convert8");

function toggle7() {
    if (visible) {
        visible = 0;
        convert8.style.display = 'none';
        btn6.innerHTML = '<i class="fas fa-plus"></i> Show More ';
        txt6.style.display = 'none';

    } else {
        visible = 1;
        convert8.style.display = 'block';
        btn6.innerHTML = '<i class="fas fa-minus"></i> Show Less';
        txt6.style.display = 'table';
    }
}

按钮

<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>

注意 此toggle7在页面的6个切换按钮中都可以正常工作，但如果第一个切换按钮已打开，则我必须双击第二个切换按钮。 所有按钮的javascript保持不变，而我刚刚更改了元素和函数名称的ID。 有什么建议吗？

Answer 1

将visible = true;替换为visible = false;，然后重试

Answer 2

解决了！

我用表格样式替换了条件，它将检查显示是否等于否则显示其他隐藏。

这是代码：）

<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>

感谢您的所有建议：）编码愉快！