如何在第二次单击时隐藏折叠选项卡

<div class="tab-container">
  <button class="tab-button">选项卡1</button>
  <div class="tab-content">选项卡1的内容</div>
  
  <button class="tab-button">选项卡2</button>
  <div class="tab-content">选项卡2的内容</div>
  
  <button class="tab-button">选项卡3</button>
  <div class="tab-content">选项卡3的内容</div>
</div>

.tab-container {
  border: 1px solid #ccc;
  padding: 10px;
}

.tab-button {
  background-color: #f0f0f0;
  border: none;
  padding: 5px 10px;
  margin-bottom: 5px;
  cursor: pointer;
}

.tab-content {
  display: none;
  padding: 10px;
}

// 获取所有选项卡按钮和内容的元素
var tabButtons = document.getElementsByClassName("tab-button");
var tabContents = document.getElementsByClassName("tab-content");

// 初始化选项卡状态变量
var isTabHidden = false;

// 监听按钮的点击事件
for (var i = 0; i < tabButtons.length; i++) {
  tabButtons[i].addEventListener("click", function() {
    // 切换选项卡的显示状态
    if (isTabHidden) {
      showTab();
    } else {
      hideTab();
    }
    
    // 切换选项卡状态变量的值
    isTabHidden = !isTabHidden;
  });
}

// 显示选项卡的函数
function showTab() {
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = "block";
  }
}

// 隐藏选项卡的函数
function hideTab() {
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = "none";
  }
}