Javascript js中的各种按钮点击手风琴

我正在构建一个手风琴菜单，用于在我的页面中进行设置，如图所示，这里默认显示header1菜单，当我单击conform按钮（header1）时，它必须隐藏header1并显示header2内容

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';
            });}

var accItem=document.getElementsByClassName（'acordionitem'）；
var accHD=document.getElementsByClassName（'accordionItemHeading'）；
var submitBtn=document.getElementsByClassName（'submit'）；
对于（i=0；i

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>

选择服务器


符合
取消


选择组
测试


符合
取消


时机
符合
取消


通知
符合
取消

var accItem=document.getElementsByClassName（'accordionItemContent'）；
var accHD=document.getElementsByClassName（'accordionItemHeading'）；
var submitBtn=document.getElementsByClassName（'submit'）；
函数toggleHeader（）{
var itemClass=this.nextElementSibling.className；
//Ember.Logger.debug（itemClass）；
对于（i=0；i

.accordionItemContent.close{
显示：无；
}

选择服务器


证实
取消




选择组
测试




证实
取消




时机
证实
取消




通知
证实
取消

那么，您尝试了哪些部分，哪些部分不起作用？我现在添加脚本部分