W3Schoolアコーディオン（html、css、jsのみ）の全ボタンを閉じる

Question

私はW3Schoolで見つけたアコーデオンを必要とするプロジェクトに取り組んでおり、うまくいきます。

Javascriptを使用してクローズオールボタンを追加しようとしていますが、成功しません。

私は、「アコーディオン」をクリックするたびに、「アクティブ」クラスを取得した後、クリックした場所のすぐ下にある「パネル」クラスのいずれかをクリックすると、元のコードでわかるように、特定の高さまで閉じるか開いている。

ボタンを閉じると、ボタンを作成しようとしましたが、クリックするたびにすべてのテキストクラスが前の機能と同じように閉じます。

なぜ動作しないのか分かりませんので、コードを変更しました。すべてを閉じるボタンをクリックすると、テキストが赤色になり（正常に動作します）、正常に動作します。

maxHeight = nullを試してみると、エラーメッセージは表示されません。 誰かが私が間違ってやっていることとそれを修正する方法を知っていますか？

おかげ

（以下のコードを参照してください）

https://jsfiddle.net/16qpjv5y/3/

HTML + JAVASCRIPT

<h2>Accordion</h2> 

<button class="accordion">Section 1</button> 
<div class="panel"> 
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 

<button class="accordion">Section 2</button> 
<div class="panel"> 
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 

<button class="accordion">Section 3</button> 
<div class="panel"> 
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 

<div class="closeall" onclick="collapseall()">Close All</div> 

<script> 
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"; 
    } 
    } 
} 

function collapseall() { //problematic part 
    var x = document.getElementsByClassName("text"); 
    var b; 
    for (b = 0; b < x.length; b++) { 
     x[b].style.maxHeight = null; 
    } 
} 
</script> 

CSS

button.accordion { 
background-color: #eee; 
color: #444; 
cursor: pointer; 
padding: 18px; 
width: 100%; 
border: none; 
text-align: left; 
outline: none; 
font-size: 15px; 
transition: 0.4s; 
} 

button.accordion.active, button.accordion:hover { 
    background-color: #ddd; 
} 

button.accordion:after { 
    content: '\002B'; 
    color: #777; 
    font-weight: bold; 
    float: right; 
    margin-left: 5px; 
} 

button.accordion.active:after { 
    content: "\2212"; 
} 

div.panel { 
    padding: 0 18px; 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.2s ease-out; 
} 

.closeall { 
    float: right; 
    margin: 1% 2% 0 0; 
    cursor: pointer; 
} 

Answer 1

maxheightの変更を.textに適用すると、.panelになります。しかし、ボタンから.activeクラスも削除する必要があります。

button.accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    background-color: #ddd; 
 
} 
 

 
button.accordion:after { 
 
    content: '\002B'; 
 
    color: #777; 
 
    font-weight: bold; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2212"; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
} 
 

 
.closeall { 
 
    float: right; 
 
    margin: 1% 2% 0 0; 
 
    cursor: pointer; 
 
}

<h2>Accordion</h2> 
 

 
<button class="accordion">Section 1</button> 
 
<div class="panel"> 
 
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 2</button> 
 
<div class="panel"> 
 
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 3</button> 
 
<div class="panel"> 
 
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<div class="closeall" onclick="collapseall()">Close All</div> 
 

 
<script> 
 
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"; 
 
    } 
 
    } 
 
} 
 

 
function collapseall() { //problematic part 
 
    var x = document.getElementsByClassName("panel"); 
 
    var b; 
 
    for (b = 0; b < x.length; b++) { 
 
     x[b].style.maxHeight = null; 
 
     x[b].previousElementSibling.classList.remove('active'); 
 
    } 
 
} 
 
</script>

Answer 2

あなたのnこのように、たとえばこれを行うには、EED：

function collapseall() { //problematic part 
    var x = document.getElementsByClassName("accordion"); 
    var b; 
    for (b = 0; b < x.length; b++) { 
    x[b].classList.remove("active"); 
    var panel = x[b].nextElementSibling; 
    panel.style.maxHeight = null; 
} 

問題は、トランジションやその他の適切なCSSが設定されている代わりに.panelのクラス.textですべての要素を見つけているということです。