<div class="accordion_area">
  <button class="btn btn_toggle">Whit is accordion?</button>
  <div class="content_area">
    Accordion is accordion.
  </div>
</div>

<div class="accordion_area">
  <button class="btn btn_toggle">Whit is accordion?</button>
  <div class="content_area">
    Accordion is accordion.
  </div>
</div>

<div class="accordion_area" data-group="one">
  <button class="btn btn_toggle">Whit is accordion?</button>
  <div class="content_area act">
    Accordion is accordion.
  </div>
</div>

<div class="accordion_area" data-group="one">
  <button class="btn btn_toggle">Whit is accordion?</button>
  <div class="content_area">
    Accordion is accordion.
  </div>
</div>

<div class="accordion_area" data-group="one">
  <button class="btn btn_toggle">Whit is accordion?</button>
  <div class="content_area">
    Accordion is accordion.
  </div>
</div>

body{background:#f4f4f4}
.btn{padding:0;background:transparent;border:0;outline:0}

.accordion_area{width:600px;margin:20px auto;border:1px solid #000}
.accordion_area .btn_toggle{display:block;width:100%;height:30px;padding:0 10px;background:#fff;font-size:14px;text-align:left;line-height:30px;box-sizing:border-box}
.accordion_area .btn_toggle::before{display:inline;content:'Q.'}
.accordion_area .content_area{display:none;padding:10px;background:#f4f4ff}
.accordion_area .content_area::before{display:inlnie;content:'A.'}
.accordion_area .content_area.act{display:block}

function bindingAccordionEvent(wrap){
  let areaArr = document.querySelectorAll(wrap);
  
  areaArr.forEach(function(area){
     let hasGroup = area.dataset['group'] !== undefined ? true : false;
    let btn = area.querySelector('.btn_toggle');
    
    btn.addEventListener('click', function(){
      if(hasGroup === true){
        let name = area.dataset['group'];
        let groupArr = document.querySelectorAll(wrap + '[data-group="'+ name +'"]');
        let thisContent = area.querySelector('.content_area');
        
        groupArr.forEach(function(group){
           let content = group.querySelector('.content_area');
          content.classList.remove('act');
        });
        thisContent.classList.add('act');
      }else{
        let content = area.querySelector('.content_area');
        content.classList.toggle('act');
      }
    });
  });
}

bindingAccordionEvent('.accordion_area');