アコーディオンを最初から開いた状態とアコーディオンを1つ開いたら、他が閉じる状態を作りたい。

Question

アコーディオンの処理で書いたjavascriptを流用して、以下パターンを作りたいです。

■アコーディオンを最初から開いた状態
htmlにis-activeというクラスをつけて、
最初から開いた状態にしたいです。

■アコーディオンを1つ開いたら、他が閉じる状態になる
htmlに--oneというクラスをつけて、
1つ開いたら、他が閉じる状態にしたいです。

今javascriptでできているの処理は通常のアコーディオンになります。
アコーディオンの中にアコーディオンがあるパターンやtriggerとpanelが同階層にない場合も想定してうまく動いています。
よくあるslideDownやslideUpのやり方ではなくmax-heightを使ったアコーディオンの処理としています。

通常のアコーディオンとバッティングしてしまい、
処理の分岐をどうしていいかわからなくなりました。

もし書き方がわかる方がいましたら、教えていただけますと幸いです。

通常のアコーディオンのHTML

<div class="c-accordion js-accordion">
	<button type="button" class="c-accordion__trigger js-accordion__trigger">
		<span class="c-headline-lv2">アコーディオンタイトル</span>
	</button>
	<div class="c-accordion__panel js-accordion__panel">
		<div class="c-accordion__content">
			<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
		</div>
	</div>
</div>
<div class="c-accordion js-accordion">
	<button type="button" class="c-accordion__trigger js-accordion__trigger">
		<span>アコーディオンタイトル</span>
	</button>
	<div class="c-accordion__panel js-accordion__panel">
		<div class="c-accordion__content">
			<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
		</div>
		<!--アコーディオンの中にアコーディオンがある場合-->
		<div class="c-accordion js-accordion">
			<button type="button" class="c-accordion__trigger js-accordion__trigger">
				<span>アコーディオンタイトル</span>
			</button>
			<div class="c-accordion__panel js-accordion__panel">
				<div class="c-accordion__content">
					<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
				</div>
			</div>
		</div>
	</div>
</div>

最初から開いた状態のアコーディオンのHTML

<div class="c-accordion js-accordion is-active">
	<button type="button" class="c-accordion__trigger js-accordion__trigger">
		<span class="c-headline-lv2">アコーディオンタイトル</span>
	</button>
	<div class="c-accordion__panel js-accordion__panel">
		<div class="c-accordion__content">
			<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
		</div>
	</div>
</div>
<div class="c-accordion js-accordion">
	<button type="button" class="c-accordion__trigger js-accordion__trigger">
		<span>アコーディオンタイトル</span>
	</button>
	<div class="c-accordion__panel js-accordion__panel">
		<div class="c-accordion__content">
			<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
		</div>
		<!--アコーディオンの中にアコーディオンがある場合-->
		<div class="c-accordion js-accordion">
			<button type="button" class="c-accordion__trigger js-accordion__trigger">
				<span>アコーディオンタイトル</span>
			</button>
			<div class="c-accordion__panel js-accordion__panel">
				<div class="c-accordion__content">
					<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
				</div>
			</div>
		</div>
	</div>
</div>

1つ開いたら、他が閉じる状態のアコーディオンのHTML

<div class="c-accordion js-accordion --one">
	<button type="button" class="c-accordion__trigger js-accordion__trigger">
		<span class="c-headline-lv2">アコーディオンタイトル</span>
	</button>
	<div class="c-accordion__panel js-accordion__panel">
		<div class="c-accordion__content">
			<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
		</div>
	</div>
</div>
<div class="c-accordion js-accordion --one">
	<button type="button" class="c-accordion__trigger js-accordion__trigger">
		<span>アコーディオンタイトル</span>
	</button>
	<div class="c-accordion__panel js-accordion__panel">
		<div class="c-accordion__content">
			<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
		</div>
		<!--アコーディオンの中にアコーディオンがある場合-->
		<div class="c-accordion js-accordion">
			<button type="button" class="c-accordion__trigger js-accordion__trigger">
				<span>アコーディオンタイトル</span>
			</button>
			<div class="c-accordion__panel js-accordion__panel">
				<div class="c-accordion__content">
					<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
				</div>
			</div>
		</div>
	</div>
</div>

[class*="js-accordion"]:not([data-accordion-device="sp"]) .js-accordion__trigger {
	cursor: pointer;
}

[class*="js-accordion"]:not([data-accordion-device="sp"]).is-hidden .js-accordion__panel {
	position: absolute;
	opacity: 0;
	visibility: hidden;
}

[class*="js-accordion"]:not([data-accordion-device="sp"]) .js-accordion__panel {
	overflow: hidden;
	transition: 0.5s max-height;
	will-change: max-height;
}

.c-accordion {
    border: #ddd 1px solid;
}

.c-accordion + .c-accordion {
    margin-top: -1px;
}

.c-accordion__trigger {
	position: relative;
	width: 100%;
	padding: 15px 60px 15px 20px;
	font-weight: bold;
	background-color: #555;
	color: #fefefe;
}

.c-accordion__content {
	padding: 20px;
}

####追記1

1点、実装中にうまくいかないことがありました。
スマホの際、ヘッダーのメニュー内にアコーディオンがあります。メニューを開いた後にアコーディオンを開き、メニューを閉じるとアコーディオンも開じるようにしたいです。開いたままですと、メニュー内の文字のアニメーションができなくなることが判明しました。

メニューを閉じた際にアコーディオンも閉じる処理を無理矢理書いたのですが、アコーディオンのjavascriptでの判定ですと閉じていないため、再度メニューを開いた際に2度クリックしないとアコーディオンが開かないのが現状となります。

<header class="l-header" role="banner">
	<div class="l-header__inner">
        <div class="l-header__menu">
            <div class="l-header__menu-inner">
                <nav class="l-header__menu-nav">
                    <ul class="l-header__menu-nav-list">
                        <li class="l-header__menu-nav-item">
                            <div class="c-accordion js-accordion">
                                <button type="button" class="c-accordion__trigger js-accordion__trigger">
                                    <span class="c-headline-lv2">アコーディオンタイトル</span>
                                </button>
                                <div class="c-accordion__panel js-accordion__panel">
                                    <div class="c-accordion__content">
                                        <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="c-accordion js-accordion">
                                <button type="button" class="c-accordion__trigger js-accordion__trigger">
                                    <span class="c-headline-lv2">アコーディオンタイトル</span>
                                </button>
                                <div class="c-accordion__panel js-accordion__panel">
                                    <div class="c-accordion__content">
                                        <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </nav>
			</div>
		</div>
        <button type="button" class="l-header__hamburger">
            <span class="l-header__hamburger-inner">
                <span class="l-header__hamburger-bars">
                    <span class="l-header__hamburger-bar"></span>
                    <span class="l-header__hamburger-bar"></span>
                    <span class="l-header__hamburger-bar"></span>
                </span>
            </span>
        </button>
	</div>
</header>

$(function () {
	menu.onInit();
});

// ----------------------------------------
// メニュー
// ----------------------------------------
const menu = {
	onInit: function onInit() {
		this.__Flag_open = false;
		this.$menu = $(".l-header__menu");
		this.$button = $(".l-header__hamburger");
		$(document).on({
			click() {
				if (!menu.__Flag_open) {
					menu.open();
				} else {
					menu.close();
				}
			},
		}, '.l-header__hamburger');
		$(document).on({
			click() {
				menu.close();
			},
		}, '.l-header__menu a[href]');
	},
	open: function open() {
		const _this = this;
		_this.__Flag_open = true;
	},
	close: function close() {
		const _this = this;
		_this.__Flag_open = false;
		//うまくいかない記述
		$('.l-header__menu .js-accordion').removeClass('is-active');
		$('.l-header__menu .js-accordion').addClass('is-hidden');
		$('.l-header__menu .js-accordion__trigger').attr("aria-expanded", false);
		$('.l-header__menu .js-accordion__panel').attr("aria-hidden", true);
		$('.l-header__menu .js-accordion__panel').css({
			maxHeight: "",
		});
	}
}

class Accordion {	
}

Answer 1

最終的なソースは以下のようになりました。

class Accordion {
	static instancesMap = new Map;
	static closeAll() {
		Array.from(Accordion.instancesMap.values()).forEach(acc => acc.close());
	}
	constructor(element) {
		Accordion.instancesMap.set(element, this);
		this.element = element;
		this.tabs = this.element.querySelector('.js-accordion__trigger');
		this.panels = this.element.querySelector('.js-accordion__panel');
		this.siblings = Array.from(this.element.parentNode.childNodes).filter(
			node => node !== this.element && node.classList && node.classList.contains('js-accordion')
		);
		this.isExclusive = this.element.classList.contains("--one");
		this.isOpen = false;
		this.height = 0;
		this.events();
		this.init();
	}
	events() {
		this.tabs.addEventListener('click', this.handleClick.bind(this));
		this.panels.addEventListener('transitionend', this.handleTransition.bind(this));
	}
	init() {
		if (!this.element.classList.contains('is-active')){
			this.close();
		}else{
			this.open();
			this.height = this.panels.scrollHeight;
		}
	}
	handleClick() {
		if (this.isOpen) {
			this.close();
		} else {
			this.open();
			this.height = this.panels.scrollHeight;
		}
	}
	open() {
		this.isOpen = true;
		this.element.classList.add('is-active');
		this.element.classList.remove('is-hidden');
		this.panels.style.maxHeight = `${0}px`;
		this.tabs.setAttribute('aria-expanded', "true");
		this.panels.setAttribute('aria-hidden', "false");
		setTimeout(() => {
			this.panels.style.maxHeight = `${this.height}px`;
		}, 1);
		if (this.element.classList.contains("--one")){
			this.siblings.forEach(elm => {
				const sibling = Accordion.instancesMap.get(elm);
				if (sibling && sibling.isOpen) sibling.close();
			});
		}
		this.siblings.forEach(elm => {
			const sibling = Accordion.instancesMap.get(elm);
			if (sibling && sibling.isOpen && (this.isExclusive || sibling.isExclusive)) {
				sibling.close();
			}
		});
	}
	close() {
		this.isOpen = false;
		this.panels.style.maxHeight = `${this.height}px`;
		this.tabs.setAttribute('aria-expanded', "false");
		this.panels.setAttribute('aria-hidden', "true");
		setTimeout(() => {
			this.panels.style.maxHeight = `${0}px`;
		}, 1);
	}
	handleTransition() {
		if (!this.isOpen) {
			this.element.classList.add('is-hidden');
			this.element.classList.remove('is-active');
		}
		this.panels.style.maxHeight = '';
	}
}
Array.from(document.querySelectorAll('.js-accordion')).forEach((el) => {
	new Accordion(el, {
		tabs: this.tabs,
		panels: this.panels
	});
});

Answer 2

なるほどのう

通常アコーディオンゆうたら、これみたいに一次元のリストやけど、noel0718はんの作ろうゆうもんは、質問にあるHTMLの中にも

<!--アコーディオンの中にアコーディオンがある場合-->

とあるように入れ子がある、ゆうたらツリーやんな。そやからちょっと工夫いるやろな。
なんや、自己解決っぽい回答に

アコーディオンを最初から開いた状態は以下のようにしたら、できました。

とあったので、この回答では、開いているのをひとつだけにする方のみについて回答するわな。

ほんで、要件の確認なんやけど、

■アコーディオンを1つ開いたら、他が閉じる状態になる

ようにしたいということなんやけど、その、開いているのは（最大で）1個というのは、アコーディオンのツリーの中で、同じ親をもつ、兄弟同士の中で最大1個という解釈でよろしいかのう？　この解釈でええのやったら、質問本文にある class Accordion に対して、少し対症療法的な修正になってまうのやけど、以下のようなコードを追加してみてはどうやろ？

1. class Accordion 冒頭部分

 class Accordion {
+  static instancesMap = new Map;
+
   constructor(element) {
+    Accordion.instancesMap.set(element, this);
     this.element = element;
     this.tabs = this.element.querySelector('.js-accordion__trigger');
     this.panels = this.element.querySelector('.js-accordion__panel');
+    this.siblings = Array.from(this.element.parentNode.childNodes).filter(
+      node => node !== this.element && node.classList && node.classList.contains('js-accordion')
+    );
     this.isOpen = false;

修正点

• staticなプロパティとして、（CSSクラスjs-accordionを持つ想定の）DOM要素をキーとし、これをもとに作成されたAccordionインスタンスとのマップinstancesMapを追加
• コンストラクタの冒頭で、instancesMapに、引数で渡された要素とthisインスタンスのkey-valueペアを追加
• インスタンスのプロパティ siblings を追加して、DOMツリーの中で兄弟関係にあるCSSクラスjs-accordionの要素の配列を持たせる。（自身は除外する。）

2. open() メソッド

  open() {
    this.isOpen = true;
    this.element.classList.add('is-active');
    this.element.classList.remove('is-hidden');
    this.panels.style.maxHeight = `${0}px`;
    this.tabs.setAttribute('aria-expanded', "true");
    this.panels.setAttribute('aria-hidden', "false");
    setTimeout(() => {
      this.panels.style.maxHeight = `${this.height}px`;
    }, 1);
+   this.siblings.forEach(elm => Accordion.instancesMap.get(elm).close());
  }
  close() {
    this.isOpen = false;

修正点

• 兄弟関係にある他のjs-accordionクラスの要素から作成されたAccordionインスタンスの各close()メソッドを呼ぶ処理を追加

　　　　　　

　

以上ですぅ。これでうまくいかへんやろか〜？

---

追記1

上に書いた追加するコードの中で、open() メソッドには１行、

+   this.siblings.forEach(elm => Accordion.instancesMap.get(elm).close());

を追加すると書いたけど、ちょっと大雑把ゆうかせっかちやったな。もう少し丁寧に書けば、こない

+    this.siblings.forEach(elm => {
+      const sibling = Accordion.instancesMap.get(elm);
+      if (sibling && sibling.isOpen) sibling.close();
+    });

なのを追加や。

追記2

open()メソッドに追加する、追記1の4行

+    this.siblings.forEach(elm => {
+      const sibling = Accordion.instancesMap.get(elm);
+      if (sibling && sibling.isOpen) sibling.close();
+    });

による兄弟アコーディオンを閉じる処理を、CSSクラス--oneを持っているときのみ行うようにするには、この4行を
if (this.element.classList.contains("--one")) {…}で囲んだ以下

+    if (this.element.classList.contains("--one")){
+      this.siblings.forEach(elm => {
+        const sibling = Accordion.instancesMap.get(elm);
+        if (sibling && sibling.isOpen) sibling.close();
+      });
+    }

の6行をopen() に追加やね。

追記3

もうひとつ。 上に書いた追記2 では、

• 自身(this)が--oneを持っているときのみ、兄弟アコーディオンの中で開いているものを閉じる

ようにしているわけですが、これよりも自身を排他的に開く場合が増える条件として、

• 自身(this)が--oneを持っているか、もしくは兄弟アコーディオンの中で開いているものが--oneを持っていれば、兄弟アコーディオンの中で開いているものを閉じる。

ようにしたいのであれば、まずコンストラクターに以下の一行

+    this.isExclusive = this.element.classList.contains("--one");

を追加する。これは排他的(exclusive)に開くアコーディオンであることを表すフラグや。これを使うて、open() には以下の6行

+    this.siblings.forEach(elm => {
+      const sibling = Accordion.instancesMap.get(elm);
+      if (sibling && sibling.isOpen && (this.isExclusive || sibling.isExclusive)) {
+        sibling.close();
+      }
+    });

を追加したらええと思うで。

追記4

Accordionクラスのstaticなメソッドとして、すべてのアコーディオンを閉じる closeAll()を追加する。

 class Accordion {
   static instancesMap = new Map;
 
+  static closeAll() {
+    Array.from(Accordion.instancesMap.values()).forEach(acc => acc.close());
+  }
+
   constructor(element) {
     Accordion.instancesMap.set(element, this);
     this.element = element;

それで、メニューを閉じる処理の中で

メニューを閉じた際にアコーディオンも閉じる処理を無理矢理書いた

コードの替わりに、アコーディオンを閉じる処理は、下記の一行

Accordion.closeAll();

に任せればええんちゃうかな〜

Comments

[noel0718]

ご回答いただいた内容を元にしたところ、思った通りの動作となりました。
解説も丁寧にしていただき、神様としか言いようがありません。ありがとうございます。

ただ1点問題がありまして、
1つ開いたら、他が閉じる状態になるものはHTMLでは以下のような形を想定しております。
<div class="c-accordion js-accordion --one">
--oneというクラスがある場合のみ
1つ開いたら、他が閉じる状態になるにしたいのですが、どのようにしたらいいでしょうか。
こちらが解消できればと思います。

[退会済みユーザー]

おおきに〜
なんや、うまくいきそうでよかったわー

> ただ1点問題がありまして、・・・

の対応策を、回答の「追記2」に書きました。参考にしたって〜

[noel0718]

試したところうまくいきました。本当にありがとうございます。
今回の件は解決しましたが、別途実装中にうまくいかないことが出てきまして、、何度も申し訳ございませんが教えていただきたいです。
「追記1」として追記しました。解決できれば嬉しいです。

[退会済みユーザー]

ふむふむ。回答の「追記4」に対策を書きました。うまくいくとええけどの〜

[noel0718]

うまくいきました。再三ありがとうございます。
数日悩んでおりましたので、大変助かりました・・。
また何かありましたら、ご相談させてください。

[退会済みユーザー]

おおきに〜
DOMの操作を、今回の Accordionクラスのようなヘルパー的なクラスを作って、そのインスタンスだったり、クラスのstaticプロパティやstaticメソッドを通じて、DOMの操作を行うという着想そのものは良いと思います。
それで多分、
「原則、アコーディオンの外部からはAccordionクラスやインスタンスを通じてのみ操作を行う」
といった決まりごとを設けることになると思いますが、始めのうちはその決め事でうまく行くと思います。しかし、何となくの悪い予想として、今後も機能拡張しているうちに、今回の

> メニューを閉じた際にアコーディオンも閉じる処理を無理矢理書いた

的なコードをどうしても書かなければならなくなり、DOM側の状態とAccordionインスタンスとの間に不整合が生じて、それをどうにかつじつまを合わせるコードを足していくうちに、いわゆる「秘伝のタレ」化していくような気がしないでもないです。そして、そのような、JQueryの利用含むDOMの直接の操作と、Accordionクラスによる抽象化の齟齬の発生とその解消に苦労した後に、Reactをやってみるとよろしいかもしれません。

今回、アコーディオンを構成するDOM要素に並行するように、Accordionクラスのインスタンスツリーを作り、このAccordionクラスのインスタンスを通じたopen()だったりclose()だったりの抽象化されたメソッドを通じてDOMを操作しようとしているわけですが、この直接DOMを操作しないようにするためのオブジェクトのツリーをReactは仮想DOMとして実現しており、今回のAccordionクラスはある特定のCSSクラスを持つHTML要素の組み合わせに対する専用のクラスでしたが、ReactではどんなHTML要素の組み合わせに対しても対応するReactコンポーネントと呼ばれるクラス（最近のReactはクラスではなく関数で書きますが。）が、今回のAccordionオブジェクトに期待している役割を担ってくれます。

[noel0718]

丁寧なご解説ありがとうございます。
Reactはやったことがありませんので、全くわからないのですがそういう違いがあるのですね。
勉強になります。後々Reactもやってみたいと思います。
例えばですが、閉じるとは逆で同意チェックボックスのようなものでチェックをいれたら
アコーディオンが開くような場合、
if($('#submit').checked) {
//アコーディオンを開く処理
$('.js-accordion[data-checkd]').addClass('is-active');
}
上記ですとうまくいかないのですが、Accordionにstaticなメソッドを追加しないといけないでしょうか。

[退会済みユーザー]

はい。今の作りだと、

> Accordionにstaticなメソッドを追加

して対応することになるかと思います。具体的には、

Accordion. instancesMap のキーとして登録されているdiv要素の中で data-checkd 属性が true のものだけを拾い出して、それらに紐づく全Accordionインスタンスについて、openメソッドを実行する。

という処理をやってくれるようなtaticなメソッドです。

> 上記ですとうまくいかないのですが、

との、

//アコーディオンを開く処理
$('.js-accordion[data-checkd]').addClass('is-active');

というコードは、先の

> メニューを閉じた際にアコーディオンも閉じる処理を無理矢理書いた

コードと同じで、先のコメントに書いた

> 「原則、アコーディオンの外部からはAccordionクラスやインスタンスを通じてのみ操作を行う」

というルールを破るものになっています。これを破るコードを（うっかりも含め）書いてしまうと、Accordionインスタンスのメソッド open や close から行う、DOMに対するひとまとまりで行うべき処理とは異なる処理を許容することになり、AccordionインスタンスとDOM要素の状態との整合性が崩れてしまいかねないです。

このように、今の作りを維持する限りは、Accordionインスタンスの保持するプロパティや、メソッドから行うDOMに対するひとまとまりの処理と、これに対応する<div class="js-accordion">・・・</div> の部分のDOM要素の状態との整合に常に配慮しないといけないというコストが生じます。

つまり、わかりやすく言うと、

$('.js-accordion[data-checkd]').addClass('is-active');
みたいなコードを書くとアコーディオンが壊れる

ぐらいの意識でいる必要があります。（こういう意識でコード書くの、けっこうツライですね。分かります）

[noel0718]

汎用的ではないですよね・・。いろんなことを想定してつくらないと気が済まない性格ですので、
既述自体を全部考え直してみます・・。
Reactは検討しましたが、社内で誰も使ってないので導入が難しい気がします。
今回のAccordionを作った経緯はslidedown・slideupを使わないかつアクセシビリティに対応した記述で作りかったのでcodepenなどを見て作った次第です。

Answer 3

アコーディオンを最初から開いた状態は以下のようにしたら、できました。

class Accordion {
	constructor(element) {
		this.element = element;
		this.tabs = this.element.querySelector('.js-accordion__tab');
		this.panels = this.element.querySelector('.js-accordion__panel');
		this.isOpen = false;
		this.height = 0;
		this.events();
		this.init();
	}
	events() {
		this.tabs.addEventListener('click', this.handleClick.bind(this));
		this.panels.addEventListener('transitionend', this.handleTransition.bind(this));
	}
	init() {
		if (!this.element.classList.contains('is-active')){
			this.close();
		}else{
			this.open();
			this.height = this.panels.scrollHeight;
		}
	}
	handleClick() {
		if (this.isOpen) {
			this.close();
		} else {
			this.open();
			this.height = this.panels.scrollHeight;
			console.log(this.height);
		}
	}
	open() {
		this.isOpen = true;
		this.element.classList.add('is-active');
		this.element.classList.remove('is-hidden');
		this.panels.style.maxHeight = `${0}px`;
		this.tabs.setAttribute('aria-expanded', "true");
		this.panels.setAttribute('aria-hidden', "false");
		setTimeout(() => {
			this.panels.style.maxHeight = `${this.height}px`;
		}, 1);
	}
	close() {
		this.isOpen = false;
		this.panels.style.maxHeight = `${this.height}px`;
		this.tabs.setAttribute('aria-expanded', "false");
		this.panels.setAttribute('aria-hidden', "true");
		setTimeout(() => {
			this.panels.style.maxHeight = `${0}px`;
		}, 1);
	}
	handleTransition() {
		if (!this.isOpen) {
			this.element.classList.add('is-hidden');
			this.element.classList.remove('is-active');
		}
		this.panels.style.maxHeight = '';
	}
}
Array.from(document.querySelectorAll('.js-accordion')).forEach((el) => {
	new Accordion(el, {
		tabs: this.tabs,
		panels: this.panels
	});
});

Answer 4

「最初から開いた状態」については、コンストラクタで属性を拾って状態変更をすればいいかと思います。

---

「1つ開いたら、他が閉じる状態」については、たとえばコンストラクタで静的メンバにインスタンスの配列を保存しておいて、それを利用するというのはどうでしょうか。
ただし、アコーディオンが入れ子になっている時の動作をどうするか、考えないといけないのではないかな、と思いました。

Comments

[noel0718]

ありがとうございます。
具体的な記述はどのようになりますでしょうか。

[Lhankor_Mhy]

if (element.classList.contains('is-active')){
//表示する処理
}

のような感じでしょうか。

---

こっちも
if (element.classList.contains('--one')){
}
として、thisを配列にpush()すればいいと思います。

[noel0718]

ありがとうございます。ちょっとそちらでやってみます。
またわからない点出てきましたら質問させてください。

[noel0718]

アコーディオンを最初から開いた状態は解決しましたが、アコーディオンを1つ開いたら、他が閉じる状態になるのがどうしてもできませんでした・・。
もう少し教えていただけますと助かります。

[Lhankor_Mhy]

アコーディオンを開く前に、すべてのアコーディオンを閉じればいいと思います。
ですので、すべてのアコーディオンのインスタンスをどこかに保存しておけばよい、ということになります。

回答に書いたのは、クラスのプライベートプロパティに持たせてコンストラクタで追加するのはどうか、という提案です。

[noel0718]

仰ってることはわかるのですが、
コードで書くとどのような形になりますか？

[Lhankor_Mhy]

list がインスタンスの配列だとすると、

list.forEach(x=>{
// 閉じる処理
})

のような形になるのではないでしょうか。

[Lhankor_Mhy]

難しいですか？
ご不明の点があればコメントしてください。

[noel0718]

教えていただいたやり方を参考に
格闘してますが、まだうまくいってない状態です。

[Lhankor_Mhy]

問題になっている部分をご提示いただければ、お役に立てることがあるかもしれません。
必要があればコメントしてください。

[noel0718]

別の方からご回答をいただきまして、解消できそうです。
気にかけていただき、ありがとうございます。
また解決しましたら記載いたします。

[Lhankor_Mhy]

ご解決されて何よりです。