HTML / CSSで動作するアコーディオンメニュー

Last Updated:2023年07月16日| | コメントを残す
HTML / CSSで動作しているアコーディオンメニュー2

タイトルをクリックすると、内容が展開されてもう一度クリックすると縮小される機能を、アコーディオン(あるいは切り替え)と呼びます。 これらの機能は、サイドバーのメニュー、FAQなど様々な応用が可能です。 参考までに Avadaでは、「トグルは一度に複数のアイテムを展開できますが、アコーディオンは一度にXNUMXつだけ展開すること」を指します。

WordPress テーマでアコーディオン機能を提供する場合、テーマ機能を使用する

WordPressは Avadaナ Diviのようなテーマでアコーディオンショートコードを提供して、比較的簡単にアコーディオン(トグル)機能を実装することができます。

個人的に 視覚的な作曲家をあまり好きではないが、 Visual Composerのようなページビルダーが使用されている場合、アコーディオン要素(エレメント)を使用することができます。 下の図は、 よりセブン(The7) テーマに含まれている Visual Composerで提供されるAccordion要素を示しています。

WordPress アコーディオン機能

WordPress アコーディオンのプラグイン

テーマでアコーディオンやトグル機能を提供していない場合、プラグインを使用することも可能です。 Accordionで検索してみる様々なプラグインが検索されます。 その中から適切なものを選択することができます。

WordPress アコーディオンのプラグイン

アコーディオンという名前のプラグインが現在の3万個以上のサイトに設置されて使用されており、評価も良い方です。

有料プラグインでは、 アコーディオンFAQ WordPress PluginというアコーディオンFAQプラグインは、ユーザーの評価が良く更新さもよくなるようです。 無料版で2%不足している場合に考慮してみることができます。

FAQページを作成したい場合は、FAQ専用のプラグインを使用することができます。 次の記事を参照してください。

JavaScript / jQueryを使用したアコーディオン機能

プラグインの使用が消えた場合は、JavaScript / jQueryを使用することも可能です。

純粋なHTML / CSSでアコーディオンメニューを実装する

jQueryやプラグインは、サイトの速度に影響を与えることができます。 速度が心配になるならば、純粋なHTML / CSSでアコーディオンメニューを実装することも可能です。 下の記事で、様々なアコーディオンメニューをHTML / CSSのみを使用して実装するコードを提供しています。

例:

メモ:


コメントを残す

コメント

割引ニュース
アストラテーマで最大40%割引!
期間限定
You This Coupon Code in Checkout
Click the code to Copy