使用JS隐藏类似tab的手风琴内容table

Question

我让这段代码按照我想要的方式运行，除了我不希望有人能够一次打开多个“标签”。我不确定如何 Javascript 从一个 div 中删除“transform-active” class，如果它通过点击添加到另一个 div它的按钮。

function Slidein(num) {
   var element = document.getElementById(num);
   element.classList.toggle("transform-active");
}

.tabcontent {
  background-color: #218D9B;
 overflow: hidden;
  height: 0px;
  width: 600px;
}

.transform{
  -webkit-transition: .7s;  
  -moz-transition: .7s;  
  -o-transition: .7s;  
  -ms-transition: .7s;  
  transition: .7s;
}

.transform-active {
  background-color: #45CEE0;
  height: 200px;
  width: 600px;
  visibility: visible;
}

<button id="button1" onclick="Slidein('div1')">Button 1</button>
<button id="button2" onclick="Slidein('div2')">Button 2</button>
<button id="button3" onclick="Slidein('div3')">Button 3</button>

<div id="div1" class="tabcontent transform">
  Here's some text in my FIRST div
</div>

<div id="div2" class="tabcontent transform">
  This would be the SECOND div text
</div>

<div id="div3" class="tabcontent transform">
  And now we have a THIRD div with its text
</div>

Answer 1

也许可以将 Slidein 改成这样：

function Slidein(num) {    
      var elementWithTransformActiveClass = document.querySelector('.transform-active');
      var element = document.getElementById(num);
      if (!!elementWithTransformActiveClass) elementWithTransformActiveClass.classList.remove("transform-active");
      if (element !== elementWithTransformActiveClass) element.classList.add("transform-active");
}

编辑：

您可以访问活动按钮：

var buttonId = num.replace('div', 'button'); 
var button = document.getElementById(buttonId); 

// and now you can add a new class to the button 

button.classList.add('new-class');


function Slidein(num) {    
      var elementWithTransformActiveClass = document.querySelector('.transform-active');
      var element = document.getElementById(num);
      if (!!elementWithTransformActiveClass) elementWithTransformActiveClass.classList.remove("transform-active");
      if (element !== elementWithTransformActiveClass) {
           element.classList.add("transform-active");

           var buttonId = num.replace('div', 'button'); 
           var button = document.getElementById(buttonId); 

           // and now you can add a new class to the button 

           button.classList.add('new-class');
      }
}

要查看可用于所有 HTML 元素的所有属性和方法，请访问：w3schools.com/jsref/dom_obj_all.asp

使用JS隐藏类似tab的手风琴内容table

Using JS to hide accordion content similar to tab table

html

javascript

css

tabs

accordion