Shiva Kumar Shiva Kumar - 1 month ago 8
HTML Question

Various button click on accordion in js

I am constracting a accordion menu for setting in my page as i described in image, here header1 menu is show by default and when i click conform button (header 1) it have to hide header1 and show header2 contents?

JS Part

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 Part

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


In this Image i described about my question

Answer

 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>