他のアコーディオンをクリックして閉じる（クラスを切り替えることなく）

Question

私は現在、このw3schoolsのlinkによく似たコードを使用していますが、他のタブを閉じるためにjavascriptに何を追加するのか分からないようですいずれかのタブをクリックすると

クリックで他のアコーディオンを閉じることに関するいくつかの回答がありました（hereなど） - しかし、主に兄弟からクラス（「アクティブ」）を削除することに取り組んでいますこの場合。

私はこのコードに慣れていませんが、CSSアニメーションではなく、パネルをスライドさせてアニメーション化するのはJSだという印象を受けています。

現在、私のコードは次のようになります、

JS

var acc = document.getElementsByClassName("accordion"); 
var i; 
for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
    this.classList.toggle("active"); 
    var panel = this.nextElementSibling; 
    if (panel.style.maxHeight){ 
     panel.style.maxHeight = null; 
    } else { 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
    } 
    } 
} 

上記のコードのスタイルを使用して他のタブを閉じるにはどのような方法があります：そのような問題の​​ とJSまたはこれを行うための他の良い方法がありますか？

Answer 1

あなたは追加することができます。

for(j = 0; j < acc.length; j++) { 
    acc[j].nextElementSibling.style.maxHeight = null; 
} 

をすべてのタブを閉じます。私の答えの一番下にあるスニペットを見てください。

PS：パネルを上下に滑らせるアニメーションはCSSですが、JavaScriptは高さを変更することでトリガします。

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    for(j = 0; j < acc.length; j++) { 
 
     acc[j].nextElementSibling.style.maxHeight = null; 
 
    } 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
}

.accordiontext{ 
 
    font-family:futura-pt; 
 
    font-weight:300; 
 
    font-size:11; 
 
} 
 
button{ 
 
    font-family:futura-pt; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    letter-spacing: 0.2em; 
 
    box-sizing:border-box; 
 
    box-shadow: inset 0 0 0 3px #202020; 
 
    position:relative; 
 
    vertical-align:middle; 
 
    border: 0; 
 
} 
 
button.accordion { 
 
    background-color: #fff; 
 
    color: #202020; 
 
    cursor: pointer; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    width: 100%; 
 
    text-align: left; 
 
    background: linear-gradient(to right, #202020 50%, #ffffff 50%); 
 
    background-size: 205% 100%; 
 
    background-position:right bottom; 
 
    transition:all 1s ease; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    background-position:left bottom; 
 
    color: #ffffff; 
 
    
 
} 
 

 
/* Style the accordion panel. Note: hidden by default */ 
 
div.panel { 
 
    padding: 8px 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.6s ease; 
 
} 
 

 
button.accordion:after { 
 
    content: '\e009'; /* Unicode character before click */ 
 
    color: #202020; 
 
    font-family: 'squarespace-ui-font'; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    float: right; 
 
    margin-right: 12px; 
 
    transition: all 0.3s ease-in 
 
    
 
} 
 

 
button.accordion.active:after { 
 
    content: "\e006"; /* Unicode character after click */ 
 
    color: #ffffff; 
 
}

<div class="accordionholder"> 
 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 

 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 

 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 

 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 
</div>

Answer 2

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    for(var j = 0; j < acc.length; j++) { 
 
     acc[j].nextElementSibling.style.maxHeight = null; 
 
     acc[j].classList.remove('active'); 
 
    } 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
}

.accordiontext{ 
 
    font-family:futura-pt; 
 
    font-weight:300; 
 
    font-size:11; 
 
} 
 
button{ 
 
    font-family:futura-pt; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    letter-spacing: 0.2em; 
 
    box-sizing:border-box; 
 
    box-shadow: inset 0 0 0 3px #202020; 
 
    position:relative; 
 
    vertical-align:middle; 
 
    border: 0; 
 
} 
 
button.accordion { 
 
    background-color: #fff; 
 
    color: #202020; 
 
    cursor: pointer; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    width: 100%; 
 
    text-align: left; 
 
    background: linear-gradient(to right, #202020 50%, #ffffff 50%); 
 
    background-size: 205% 100%; 
 
    background-position:right bottom; 
 
    transition:all 1s ease; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    background-position:left bottom; 
 
    color: #ffffff; 
 
    
 
} 
 

 
/* Style the accordion panel. Note: hidden by default */ 
 
div.panel { 
 
    padding: 8px 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.6s ease; 
 
} 
 

 
button.accordion:after { 
 
    content: '\e009'; /* Unicode character before click */ 
 
    color: #202020; 
 
    font-family: 'squarespace-ui-font'; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    float: right; 
 
    margin-right: 12px; 
 
    transition: all 0.3s ease-in 
 
    
 
} 
 

 
button.accordion.active:after { 
 
    content: "\e006"; /* Unicode character after click */ 
 
    color: #ffffff; 
 
}

<div class="accordionholder"> 
 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 

 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 

 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 

 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 
</div>