FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

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

sat0mi
新規メンバー
6 0 0

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

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

});

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

HTMLは

ーーーーーーーーーーーーーーーーーーーーー
<script src="{{ 'accordion.js' | asset_url }}"></script>
<div id="accordion" class="accordion-container">
<h4 class="accordion-title js-accordion-title">開く</h4>
<div class="accordion-content">
<p>Accordion content 1</p>
</div><!--/.accordion-content-->

<h4 class="accordion-title js-accordion-title">開く</h4>
<div class="accordion-content">
<p>Accordion content 2</p>
</div><!--/.accordion-content-->

<h4 class="accordion-title js-accordion-title">開く</h4>
<div class="accordion-content">
<p>Accordion content 3</p>
</div><!--/.accordion-content-->

</div><!--/#accordion-->

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

3件の返信3

takeoube
Shopify Partner
15 0 5

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

200とると動きますか?

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

 

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

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

 

http://semooh.jp/jquery/api/attributes/toggleClass/class/

sat0mi
新規メンバー
6 0 0

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

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

takeoube
Shopify Partner
15 0 5

そうでしたか。。。

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

 

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

 

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

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

 

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

https://125naroom.com/web/3046

 

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

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

 

https://techmemo.biz/javascript/jquery-button-text-switch/

https://uxmilk.jp/40761