sat0mi
1
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は
ーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーー
としています。
他のサイトも調べ色々試しましたが閉じたまま作動せず困っております。
また、開いた際はテキストの「開く」が「閉じる」になるようにもしたいと思っています。
原因がわかりましたらお教えいただけますと幸いです。
よろしくお願いいたします。
toggleClass()の()の中は、クラス名しか入れることはできなかったと思うのですが、
200とると動きますか？
まちがっていたらすみません。
または、jQueryの読み込み忘れですとか。
ブラウザでコンソールエラー確認はされましたか？
http://semooh.jp/jquery/api/attributes/toggleClass/class/
sat0mi
3
ご回答ありがとうございます。
お教えいただいたようにやってみたのですがやはり作動しませんでした。。。
そうでしたか。。。
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