スマートフォンサイトでのデザインにつきまして

Question

添付画像の「交換/返品/配送情報」のように、
スマートフォンサイトで見た場合に、
最初はページが隠れてるデザインで、右の矢印を押すとページが表示されるように
デザインをしたいのですが、これはどのようにコードを組めばよいでしょうか？###HR######IMG0a65dc0f20d2ce9c77cf01eb112a10a8f.pngIMG0###

Answer

ECマスターズの田中です。

最初は隠れており、タップすることで表示されるメニューは
いわゆる「アコーディオンメニュー」と呼ばれるもので、
JavaScriptやCSSを活用して、
様々な方法で設置することができます。

Googleにて検索していただくと様々な方法が紹介されておりますが、
たとえば、かなりシンプルな方法が
下記URLにて紹介されております。
https://www.kimagure-weblog.net/js/accordion001/
（動作のみの実装で、別途デザインを整える必要がございます）

なお、システムによっては、
プラグインなどの拡張機能によって
HTMLで記載するよりも簡単に
設置することができる場合もございます。

たとえば、WordPressプラグインの
「Shortcodes Ultimate」の機能の一つとして、
アコーディオンを挿入する機能が搭載されております。
https://ja.wordpress.org/plugins/shortcodes-ultimate/

まずは、aloha_odenさんにて
「アコーディオンメニュー」の導入をお試しいただき、
わからない場合は、
導入の際に詰まった場所や、
導入先のサイトのシステム（WordPress、カラーミーショップ など）など、
詳しい情報を添えてご返信いただきますようお願いします。