兄弟要素の子を選択するにはどうすればよいですか？

Question

私のアコーディオンは、開け閉めに基づいて私のdivのスペースをいっぱいにし続けます。私はそれの周りにdivをラップし、この動作を防ぐために展開されたアコーディオンの高さに設定します。問題は私のjsはthis.nextSiblingを選択することに依存し、それはすべてを壊すことです。

var acc = document.getElementsByClassName("review-button"); 
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'; 
    } 
    } 
} 

複数のアコーディオンがあるので、それは範囲内の「this」を使用しなければなりません。 私のオリジナルの考えは...何かなどを行うために

this.nextElementSibling.children[0]; 

だったが、それは動作しませんでした。

divの現在のコンテンツは、アコーディオン機能を維持したまま、どのように高さを設定して折り返しますか？

<!--accordion 1-->  
<button class="review-button" data-target="#demo{{ gameIndex }}"> 
    <span class="review-button-chevron fa fa-angle-down"></span>  
     Our Reviews 
    </button> 

<!-- Slide out --> 
<div class="quote-machine-container"> 
    <div id="demo{{ gameIndex }}" class=" quote-machine"></div> 
</div> 

<!--accordion 2--> 
<button class="review-button" data-target="#demo{{ gameIndex }}"> 
    <span class="review-button-chevron fa fa-angle-down"></span>  
     Our Reviews 
    </button> 

<!-- Slide out --> 
<div class="quote-machine-container"> 
    <div id="demo{{ gameIndex }}" class=" quote-machine"></div> 
</div> 

Answer 1

1. <main>ですべてを包み、それ自身の<section>
2. の各<header>と<div>を配置し、それにeventListener()を追加しました。 e.currentTarget（ノードと比較することによって
   e.target
   • （クリックしたノード）であるかを判断：それへのいかなるクリック
   • イベントハンドラ（acc()）意志クリックされたヘッダーに委譲する（e.target。） ）
   • 確立されると、e.targetは.activeクラスを失うか、獲得するでしょう。
   • nextElementSiblingの制限プロパティを排除するために、その機能を単純なCSSルールセット：.active + .x-panelで置き換えます。これは基本的にnextElementSiblingと同じです。

SNIPPET

var main = document.getElementById("x-main"); 
 

 
main.addEventListener('click', acc, false); 
 

 
function acc(e) { 
 
    if (e.target !== e.currentTarget) { 
 
    var tgt = e.target; 
 
    tgt.classList.toggle("active"); 
 
    } 
 
}

.x-section { 
 
    height: 100px; 
 
} 
 
.x-header { 
 
    cursor: pointer; 
 
    border: 3px outset grey; 
 
    height: 30px; 
 
} 
 
.x-panel { 
 
    border: 3px inset black; 
 
    max-height: 0; 
 
    opacity: 0; 
 
    transition: opacity .2s ease-in; 
 
} 
 
.active + .x-panel { 
 
    opacity: 1; 
 
    max-height: 300px; 
 
    overflow-y: hidden; 
 
    transition: max-height 1s ease-in .1s, opacity 1s; 
 
}

<main id='x-main'> 
 
    <section class='x-section'> 
 
    <header class='x-header'>HEADER</header> 
 
    <div class='x-panel'> 
 
     CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
 
    </div> 
 
    </section> 
 
    <section class='x-section'> 
 
    <header class='x-header'>HEADER</header> 
 
    <div class='x-panel'> 
 
     CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
 
    </div> 
 
    </section> 
 
    <section class='x-section'> 
 
    <header class='x-header'>HEADER</header> 
 
    <div class='x-panel'> 
 
     CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
 
    </div> 
 
    </section> 
 
</main>