Verschiedene Tasten auf Akkordeon in js

Question

Ich constracting ein Akkordeon-Menü in meiner Seite für die Einstellung, wie ich in Bild beschrieben, hier header1 Menü zeigt standardmäßig und wenn ich klicken konform (Header 1) es header1 zu verbergen hat und show header2 Inhalt?

JS Teil

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 Teil

<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>