アコーディオンメニュー

アコーディオンメニュー

【アコーディオンメニュー】開くボタン・閉じるボタンをフォントの反転で実装する場合

アコーディオンメニューの開くボタン・閉じるボタンをフォントで実装します。フォントにはFont Awesomeを使用します。開くボタンは下向き矢印のフォント、閉じるボタンは開くボタンをCSSで180度反転させた上向き矢印のフォントです。

アコーディオンメニュー

【アコーディオンメニュー】コンテンツの表示数を指定して表示

コンテンツの表示数を指定して表示し、指定の数を超えるコンテンツは非表示にします。非表示のコンテンツは「もっと見る」ボタンで表示数分だけ表示し、コンテンツを全て表示したタイミングで「もっと見る」ボタンを非表示にします。なおコンテンツが指定の表示数と同じかそれよりも少ない場合は「もっと見る」ボタンを非表示にします。

アコーディオンメニュー

【アコーディオンメニュー】最初のアコーディオンメニューのみ開いた状態でページを表示

最初のアコーディオンメニューのみ開いた状態でページを表示します。アコーディオンメニューの開くボタン・閉じるボタンはCSSのみで作成しています。

アコーディオンメニュー

【アコーディオンメニュー】コンテンツの最大数を指定して表示

コンテンツの最大数を指定して表示し、指定の数を超えるコンテンツは非表示にします。非表示のコンテンツは「もっと見る」ボタンで表示、「閉じる」ボタンで非表示にします。なおコンテンツが指定の最大数と同じかそれよりも少ない場合は「もっと見る」ボタンを非表示にします。

アコーディオンメニュー

【アコーディオンメニュー】開いたアコーディオンメニューの先頭へスクロールして移動

アコーディオンメニューを開いた時に、アコーディオンメニューの先頭へスクロールして移動します。閉じた時はスクロールしません。

アコーディオンメニュー

【アコーディオンメニュー】コンテンツを絞り込み検索して表示

PC表示でマウスオーバーで展開するプルダウンメニュー、スマホ表示でアコーディオンメニューを使ってコンテンツの絞り込み検索をします。絞り込み検索の条件はカスタムデータ属性の一致を利用します。

アコーディオンメニュー

【アコーディオンメニュー】コンテンツをアニメーションでソートして表示【jquery.mixitup.js】

jQueryプラグインのjquery.mixitup.jsを利用して、アニメーション付きでコンテンツをソートして表示します。プラグインのバージョンはv2.1.11です。ソートメニューはPC表示でマウスオーバーで展開するプルダウンメニュー、スマホ表示でアコーディオンメニューです。

アコーディオンメニュー

【アコーディオンメニュー】プルダウンメニューをスマホ表示でアコーディオン化

PC表示でマウスオーバーで展開するプルダウンメニューを、スマホ表示でアコーディオンメニューにします。htmlとCSSのみで実装し、スマホ表示のみjQueryでtoggleClassを利用します。

アコーディオンメニュー

【アコーディオンメニュー】ボタンのテキストを入れ替え【続きを表示・閉じる】

続きを表示ボタンをクリックで追加のコンテンツを表示し、ボタン内のテキストを「続きを表示」から「閉じる」へ変更します。閉じるボタンをクリックで追加されたコンテンツを非表示にし、ボタン内のテキストを「閉じる」から「続きを表示」へ変更します。

アコーディオンメニュー

【アコーディオンメニュー】開くボタン・閉じるボタンを1つの画像の回転で実装する場合

アコーディオンメニューの開くボタン・閉じるボタンを1つの画像で実装しています。開くボタンは下向き矢印の画像、閉じるボタンは開くボタンをCSSで180度回転させた上向き矢印の画像です。

タイトルとURLをコピーしました