JavaScript（脱jQuery）

アコーディオン

html
                  


  

    
タイトル 01

    
テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01

    
タイトル 02

    
テキスト02テキスト02テキスト02テキスト02テキスト02

    
タイトル 03

    
テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03

・htmlソースは一緒

シンプル版

jQuery
                  
document.addEventListener("DOMContentLoaded",() => {
  const title = document.querySelectorAll('.js-accordion-title');

  for (let i = 0; i < title.length; i++){
    let titleEach = title[i];
    let content = titleEach.nextElementSibling;
    titleEach.addEventListener('click', () => {
      titleEach.classList.toggle('is-active');
      content.classList.toggle('is-open');
    });
  }

});

一つ開けると他は閉じる

jQuery
                  
const accSingleTriggers = document.querySelectorAll('.js-acc-single-trigger');

accSingleTriggers.forEach(trigger => trigger.addEventListener('click', toggleAccordion));

function toggleAccordion() {
  const items = document.querySelectorAll('.js-acc-item');
  const thisItem = this.parentNode;

  items.forEach(item => {
    if (thisItem == item) {
      thisItem.classList.toggle('is-open');
      return;
    }
    item.classList.remove('is-open');
  });
}

一つ開けると他は閉じる（一番目は開けておく）

jQuery
                  
const accSingle = document.querySelector('.js-acc-single');
const items     = accSingle.querySelectorAll('.js-acc-item');
const accSingleTriggers = accSingle.querySelectorAll('.js-acc-single-trigger');

// 最初の要素を開いておく
const firstChild = accSingle.firstElementChild;
firstChild.classList.add('is-open');

accSingleTriggers.forEach(trigger => trigger.addEventListener('click', toggleAccordion));

function toggleAccordion() {
  const thisItem = this.parentNode;

  items.forEach(item => {
    if (thisItem == item) {
      thisItem.classList.toggle('is-open');
      return;
    }
    item.classList.remove('is-open');
  });
}