Cacher is the code snippet organizer for pro developers

<div class="sidebar">
  <ul class="nav">
    <li class="js-gnav-accordion">
      <span class="js-gnav-accordion-target">見出し1</span>
      <ul class="js-gnav-accordion-contents" style="display: none;">
        <li><a href="">項目1</a></li>
        <li><a href="">項目2</a></li>
        <li><a href="">項目3</a></li>
        <li><a href="">項目4</a></li>
        <li><a href="">項目5</a></li>
      </ul>
    </li>
    <li class="js-gnav-accordion">
      <span class="js-gnav-accordion-target">見出し2</span>
      <ul class="js-gnav-accordion-contents" style="display: none;">
        <li><a href="">項目1</a></li>
        <li><a href="">項目2</a></li>
        <li><a href="">項目3</a></li>
        <li><a href="">項目4</a></li>
        <li><a href="">項目5</a></li>
        <li><a href="">項目6</a></li>
      </ul>
    </li>
    <li class="js-gnav-accordion">
      <span class="js-gnav-accordion-target">見出し3</span>
      <ul class="js-gnav-accordion-contents" style="display: none;">
        <li><a href="">PoC提案</a></li>
        <li><a href="">PoC向け<br>業務設計</a></li>
        <li><a href="">分析設計</a></li>
        <li><a href="">データ準備<br>・加工</a></li>
        <li><a href="">基礎分析</a></li>
        <li><a href="">モデル構築</a></li>
        <li><a href="">データ翻訳</a></li>
        <li><a href="">業務<br>組み込み</a></li>
        <li><a href="">ROI算出</a></li>
        <li><a href="">本格導入<br>提案</a></li>
      </ul>
    </li>
    <li class="js-gnav-accordion">
      <span class="js-gnav-accordion-target">見出し4</span>
      <ul class="js-gnav-accordion-contents" style="display: none;">
        <li><a href="">項目1</a></li>
        <li><a href="">項目2</a></li>
        <li><a href="">項目3</a></li>
        <li><a href="">項目4</a></li>
        <li><a href="">項目5</a></li>
        <li><a href="">項目6</a></li>
        <li><a href="">項目7</a></li>
        <li><a href="">項目8</a></li>
      </ul>
    </li>
  </ul>
</div>

import $ from 'jquery';

const SCROLL_EVENT = 'onwheel' in document ? 'wheel.accordion' : 'onmousewheel.accordion';

export default class Accordion {
	constructor($target, className) {
		this.$accordion = $target;
		this.$accordionTarget = this.$accordion.find(`.${className}-target`);
		this.$accordionContents = this.$accordion.find(`.${className}-contents`);
		this.$allAccordion = $(`.${className}`);
		this.$allAccordionContents = this.$allAccordion.find(`.${className}-contents`);
		this.bindEvent();
	}
	bindEvent() {
		this.$accordionTarget.on('click', () => {
			if(this.$accordionContents.is(':animated')) {
				return;
			}
			this.$accordion.hasClass('is-show') ? this.close() : this.open();
		});
	}
	bindScrollEvent() {
		$(document).on(SCROLL_EVENT, () => this.scrollCancel());
	}
	open() {
		this.$allAccordionContents.slideUp();
		this.$allAccordion.removeClass('is-show');
		this.$accordionContents.slideDown(() => {
			this.bindScrollEvent();
            // 開閉後スクロールしたい場合
			//$('body, html').animate({scrollTop: this.$accordion.offset().top - 100}, 500, 'swing');
		});
		this.$accordion.addClass('is-show');
	}
	close() {
		this.$accordionContents.slideUp();
		this.$accordion.removeClass('is-show');
	}
	scrollCancel() {
		$('html, body').stop();
		$(document).off(SCROLL_EVENT);
	}
}

import $ from 'jquery';
import Accordion from './components/accordion';

/*
* PC/SP グロナビアコーディオン
* PC _sidebar.scss
* SP _nav-sp.scss
*
* 第一引数:jQueryオブジェクト
* 第二引数:オブジェクトのクラス名
*
*/
$('.js-gnav-accordion').each((i,e) => {
  new Accordion($(e), 'js-gnav-accordion');
});