FROM CACHE - jp_header

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

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

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