様々なボタンがjsのアコーディオンをクリック

Question

私は画像で説明したように私のページに設定するためのアコーディオンメニューを作成しています。ここでheader1メニューはデフォルトで表示されています。 show header2 contentsを表示しますか？

JSパート

var accItem = document.getElementsByClassName('accordionItem'); 
     var accHD = document.getElementsByClassName('accordionItemHeading'); 
     var submitBtn = document.getElementsByClassName('submit'); 
     for (i = 0; i < accHD.length; i++) { 
      accHD[i].addEventListener('click', function toggleItem(){ 
       var itemClass = this.parentNode.className; 
       Ember.Logger.debug(itemClass); 
       for (i = 0; i < accItem.length; i++) { 
        accItem[i].className = 'accordionItem close'; 
       } 
       if (itemClass == 'accordionItem close') { 
        this.parentNode.className = 'accordionItem open'; 
       } 
      }); 
    submitBtn[i].addEventListener('click', function toggleItem(){ 
       var itemBtnClass = this.childNodes[i]; 
       Ember.Logger.debug(itemBtnClass); 
       for (i = 0; i < accItem.length; i++) { 
        accItem[i].className = 'accordionItem close'; 
       } 
       this.childNodes[i].className = 'accordionItem open'; 
      });} 

HTMLパート

<div class="accordionWrapper"> 
<div class="accordionItem open"> 
<h2 class="accordionItemHeading" >Select Server</h2> 
<div class="accordionItemContent" align="center"> 
    <br> 
    <button class="submit">Conform</button> 
    <button class="cancel">Cancel</button><br><br> 
    </div> 
    </div> 
    <div class="accordionItem close"> 
    <h2 class="accordionItemHeading" >Select Group</h2> 
    <div class="accordionItemContent" align="center"> 
    <input type="radio" name="Group" value="Testing">Testing<br><br> 
    <button class="submit">Conform</button> 
    <button class="cancel">Cancel</button><br><br> 
    </div> 
</div> 
<div class="accordionItem close"> 
<h2 class="accordionItemHeading" >Timing</h2> 
    <div class="accordionItemContent" align="center"> 
     <button class="submit">Conform</button> 
     <button class="cancel">Cancel</button><br><br> 
     </div> 
     </div> 
    <div class="accordionItem close"> 
    <h2 class="accordionItemHeading" >Notification</h2> 
    <div class="accordionItemContent" align="center"> 
     <button class="submit">Conform</button> 
     <button class="cancel">Cancel</button><br><br> 
    </div> 
    </div> 
</div> 

Answer 1

var accItem = document.getElementsByClassName('accordionItemContent'); 
 
var accHD = document.getElementsByClassName('accordionItemHeading'); 
 
var submitBtn = document.getElementsByClassName('submit'); 
 

 
function toggleHeader() { 
 
    var itemClass = this.nextElementSibling.className; 
 

 
    //Ember.Logger.debug(itemClass); 
 
    for (i = 0; i < accItem.length; i++) { 
 
    accItem[i].className = 'accordionItemContent close'; 
 
    } 
 
    if (itemClass == 'accordionItemContent close') { 
 
    this.nextElementSibling.className = 'accordionItemContent open'; 
 
    } 
 
} 
 

 
function toggleItem() { 
 
    var itemClass = this.parentNode.className; 
 
    var nextItem = -1; 
 

 
    //Ember.Logger.debug(itemBtnClass); 
 
    for (i = 0; i < accItem.length; i++) { 
 

 
    if (accItem[i] == this.parentNode) { // identify next accordian item to open 
 
     nextItem = i + 1; 
 
    } 
 

 
    if (i != nextItem) 
 
     accItem[i].className = 'accordionItemContent close'; 
 
    else 
 
     accItem[i].className = 'accordionItemContent open'; 
 
    } 
 
} 
 

 
for (i = 0; i < accHD.length; i++) { 
 
    accHD[i].addEventListener('click', toggleHeader); 
 
    submitBtn[i].addEventListener('click', toggleItem); 
 
}

.accordionItemContent.close { 
 
    display: none; 
 
}

<div class="accordionWrapper"> 
 
    <div class="accordionItem"> 
 
    <h2 class="accordionItemHeading">Select Server</h2> 
 
    <div class="accordionItemContent open" align="center"> 
 
     <br> 
 
     <button class="submit">Confirm</button> 
 
     <button class="cancel">Cancel</button> 
 
     <br> 
 
     <br> 
 
    </div> 
 
    </div> 
 
    <div class="accordionItem"> 
 
    <h2 class="accordionItemHeading">Select Group</h2> 
 
    <div class="accordionItemContent close" align="center"> 
 
     <input type="radio" name="Group" value="Testing">Testing 
 
     <br> 
 
     <br> 
 
     <button class="submit">Confirm</button> 
 
     <button class="cancel">Cancel</button> 
 
     <br> 
 
     <br> 
 
    </div> 
 
    </div> 
 
    <div class="accordionItem"> 
 
    <h2 class="accordionItemHeading">Timing</h2> 
 
    <div class="accordionItemContent close" align="center"> 
 
     <button class="submit">Confirm</button> 
 
     <button class="cancel">Cancel</button> 
 
     <br> 
 
     <br> 
 
    </div> 
 
    </div> 
 
    <div class="accordionItem"> 
 
    <h2 class="accordionItemHeading">Notification</h2> 
 
    <div class="accordionItemContent close" align="center"> 
 
     <button class="submit">Confirm</button> 
 
     <button class="cancel">Cancel</button> 
 
     <br> 
 
     <br> 
 
    </div> 
 
    </div> 
 
</div>