ショッピングガイドを開く・閉じる
富泉のホームページで利用している
ショッピングガイドを開く・閉じるっていうスクリプトを利用したご案内ですが、
作成方法の備忘録です。
その前に、何故? このように開く・閉じるというようにしたかというとですね、
この部分ってどこのページに行っても目にする部分で、
必要な情報ではありますが、常連様や、情報がある程度分かっている人にとっては、
目障り以外の何物でもないということと、
情報が必要な方は、ワンクリックしてでも見ると思うからです。
このへんの考えかたは、人それぞれだと思うのですが、
性格的に、買って買って~って言いすぎちゃうのは好きじゃないんです。
自分がそういうところに行ったら買う気がなくなるもので
そんなわけで、作成方法の備忘録。
まずは、スクリプトがないとできません。
アコーディオンタイプのものや様々なタイプがありますが、
スッとシンプルに開閉するものを選んでいます。
スクリプトは富泉のサイトに落としてあるので、
万が一この記事を見て、使うっていうかたはご連絡ください ^^;
で、このスクリプトを</head>までに記述(できないばあいは表示位置でも大丈夫だと思います)
<script type="text/javascript" src="https://www.tomisen.com/js/OpenClose.js"></script>
で、表示する箇所に
<a onclick="showHide('SH-001');return false;" href="#">お買いものガイドを開く/閉じる Click</a> <div id="SH-001" style="display: none;"> ここに表示する内容 </div> <a onclick="showHide('SH-001');return false;" href="#">お買いものガイドを閉じる/開く Click</a>
これで、開閉式のお買いものガイドの完成です。
あとは、表示するときに、適宜スタイルを調節すればバッチリ~・・・
だと思いますよ♪