# アコーディオンが作動しない

**URL:** <https://community.shopify.com/t/topic/97157>\
**Category:** 技術的なQ＆A\
**Created:** [February 5, 2022, 9:55am UTC](https://community.shopify.com/t/topic/97157 "2022-02-05T09:55:22Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

jQueryで実装したアコーディオンが反応せず、開閉しない。開いた際に「開く」を「閉じる」に変えたい要望もあり。提示されたaccordion.jsとHTMLのコード断片が原因特定の中心情報。

主な指摘・仮説:
- toggleClassの第2引数に数値(200)は不可。toggleClass('open')に修正して動作確認。
- jQueryの読み込み漏れの可能性。ブラウザのコンソールでエラー確認を推奨。
- .openクラスに対応するCSSが当たっているか確認。

進捗・結果:
- 200削除でも未解決。追加の調査（コンソールエラー、jQuery読込、CSS適用の確認）が必要。
- 難しい場合は専門家への依頼も提案。

「開く／閉じる」切り替え案:
- CSSの:beforeでcontentをクラスに応じて切替。
- jQueryの.text()でタイトル文字列を切替。参考リンクが提示。

用語注:
- slideToggle(200): 要素の表示/非表示を200msでアニメーション。
- toggleClass('open'): 指定クラスの付け外し。

現状: 未解決。原因未特定で、検証継続が必要。

<div class="post-metadata">

**Author:** ![sat0mi](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sat0mi](https://community.shopify.com/u/sat0mi)\
**Post date:** [February 5, 2022, 9:55am UTC](https://community.shopify.com/t/topic/97157/1 "2022-02-05T09:55:22Z")

</div>

jqueryでアコーディオンを実装しようと思ってます。

[https://flex-box.net/accordion/](https://flex-box.net/accordion/) こちらのサイトを参考に  
accordion.jsを用意して  
ーーーーーーーーーーーーーーーーーーーーー  
jQuery(function ($) {  
$(‘.js-accordion-title’).on(‘click’, function () {  
/_クリックでコンテンツを開閉_/  
$(this).next().slideToggle(200);  
/_矢印の向きを変更_/  
$(this).toggleClass(‘open’, 200);  
});

});

ーーーーーーーーーーーーーーーーーーーーー  
を作り

HTMLは

ーーーーーーーーーーーーーーーーーーーーー

#### 開く

Accordion content 1

#### 開く

Accordion content 2

#### 開く

Accordion content 3

ーーーーーーーーーーーーーーーーーーーーー  
としています。  
他のサイトも調べ色々試しましたが閉じたまま作動せず困っております。  
また、開いた際はテキストの「開く」が「閉じる」になるようにもしたいと思っています。  
原因がわかりましたらお教えいただけますと幸いです。  
よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![takeoube](https://avatars.discourse-cdn.com/v4/letter/t/53a042/32.png) [@takeoube](https://community.shopify.com/u/takeoube)\
**Post date:** [February 8, 2022, 7:57am UTC](https://community.shopify.com/t/topic/97157/2 "2022-02-08T07:57:12Z")

</div>

toggleClass()の()の中は、クラス名しか入れることはできなかったと思うのですが、

200とると動きますか？

まちがっていたらすみません。

または、jQueryの読み込み忘れですとか。

ブラウザでコンソールエラー確認はされましたか？

[http://semooh.jp/jquery/api/attributes/toggleClass/class/](http://semooh.jp/jquery/api/attributes/toggleClass/class/)

---

<div class="post-metadata">

**Author:** ![sat0mi](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sat0mi](https://community.shopify.com/u/sat0mi)\
**Post date:** [February 9, 2022, 8:34pm UTC](https://community.shopify.com/t/topic/97157/3 "2022-02-09T20:34:23Z")

</div>

ご回答ありがとうございます。

お教えいただいたようにやってみたのですがやはり作動しませんでした。。。

---

<div class="post-metadata">

**Author:** ![takeoube](https://avatars.discourse-cdn.com/v4/letter/t/53a042/32.png) [@takeoube](https://community.shopify.com/u/takeoube)\
**Post date:** [February 10, 2022, 12:11am UTC](https://community.shopify.com/t/topic/97157/4 "2022-02-10T00:11:20Z")

</div>

そうでしたか。。。

toggleClassで.openを取り外しされているようですが、cssはあてていますか？

こちらでも詳細がわからないので、憶測でのお話となりすみません。

他、コンソールエラーの内容など確認してみてください。

難しいようでしたら、専門の方へご依頼されたほうがいいかもです。

参考サイトおいておきますね！

[https://125naroom.com/web/3046](https://125naroom.com/web/3046)

「閉じる・開く」の切り替えですとcss制御で:beforeなどのcontent:‘開く’;をclassで切り替えるですとか、

jQeryなら.text()等で変更できると思います。

[https://techmemo.biz/javascript/jquery-button-text-switch/](https://techmemo.biz/javascript/jquery-button-text-switch/)

[https://uxmilk.jp/40761](https://uxmilk.jp/40761)