Liquid、JavaScriptなどに関する質問
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-->
ーーーーーーーーーーーーーーーーーーーーー
としています。
他のサイトも調べ色々試しましたが閉じたまま作動せず困っております。
また、開いた際はテキストの「開く」が「閉じる」になるようにもしたいと思っています。
原因がわかりましたらお教えいただけますと幸いです。
よろしくお願いいたします。
toggleClass()の()の中は、クラス名しか入れることはできなかったと思うのですが、
200とると動きますか?
まちがっていたらすみません。
または、jQueryの読み込み忘れですとか。
ブラウザでコンソールエラー確認はされましたか?
ご回答ありがとうございます。
お教えいただいたようにやってみたのですがやはり作動しませんでした。。。
そうでしたか。。。
toggleClassで.openを取り外しされているようですが、cssはあてていますか?
こちらでも詳細がわからないので、憶測でのお話となりすみません。
他、コンソールエラーの内容など確認してみてください。
難しいようでしたら、専門の方へご依頼されたほうがいいかもです。
参考サイトおいておきますね!
https://125naroom.com/web/3046
「閉じる・開く」の切り替えですとcss制御で:beforeなどのcontent:'開く';をclassで切り替えるですとか、
jQeryなら.text()等で変更できると思います。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024