ショッピングガイドを開く・閉じる

富泉のホームページで利用している
ショッピングガイドを開く・閉じるっていうスクリプトを利用したご案内ですが、
作成方法の備忘録です。

その前に、何故? このように開く・閉じるというようにしたかというとですね、
この部分ってどこのページに行っても目にする部分で、
必要な情報ではありますが、常連様や、情報がある程度分かっている人にとっては、
目障り以外の何物でもないということと、
情報が必要な方は、ワンクリックしてでも見ると思うからです。

このへんの考えかたは、人それぞれだと思うのですが、
性格的に、買って買って~って言いすぎちゃうのは好きじゃないんです。

自分がそういうところに行ったら買う気がなくなるもので  :mrgreen:

そんなわけで、作成方法の備忘録。

まずは、スクリプトがないとできません。
アコーディオンタイプのものや様々なタイプがありますが、
スッとシンプルに開閉するものを選んでいます。

スクリプトは富泉のサイトに落としてあるので、
万が一この記事を見て、使うっていうかたはご連絡ください ^^;

で、このスクリプトを</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>

これで、開閉式のお買いものガイドの完成です。

あとは、表示するときに、適宜スタイルを調節すればバッチリ~・・・
だと思いますよ♪


posted by そば富泉

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)