CSSで作ったトグルボタンで開閉して状態を保持する

スマートフォンで画面が小さいので、情報のあるエリアをボタンで開閉しつつ状態を保持したい、という場合があると思います。

今回はCSSで作ったトグルボタンで指定したエリアを開閉し、なおかつ状態を保持する方法をご紹介いたします。

サンプル

「お知らせ」をクリックすると開閉し、ブラウザを更新しても開閉の状態が保持されます。

サンプルをご覧ください。

サンプル

ソースと解説

ソースはjs、html、cssの3つとなります。

js

「#toggle」要素をクリックしたときにクッキーがセットされ、状態が保持されることになります。またクッキーの判定が行われ、要素を隠す状態を保持するために「d_none」のクラスで非表示を行っています。

「toggle(‘fast’)」で開閉する速度を決定しています。「fast」で速く、「slow」で遅くなります。

html

ボタン、開閉するエリア、オプションで存在するであろう「もっと見る」要素に分かれています。

ボタン部分です。

非表示される部分です。

オプションの「もっと見る」部分です。

css

デフォルトの打ち消しと、トグルボタン、オプションの「もっと見る」、非表示に使用する「display」のスタイルに分かれます。

デフォルトのスタイルを打ち消しています。

トグルボタンの基本プロパティです。

「.toggle」の「:before」疑似要素でボタンの右端にある三角アイコンを表現しています。

要素を隠す状態の保持を「display: none;」で行っています。

全ソース

jqueryは「jquery-1.11.3.min.js」と「jquery.cookie.js」を使用しています。

まとめ

  • ソースはjs、html、cssの3つ。
  • 「#toggle」要素をクリックしたときにクッキーがセットされ、状態が保持される。
  • 要素を隠す状態を保持するために「d_none」のクラスで非表示を行っている。
  • 「toggle(‘fast’)」で開閉する速度を決定している。「fast」で速く、「slow」で遅くなる。
  • jqueryは「jquery-1.11.3.min.js」と「jquery.cookie.js」を使用。

。ボタンの表示に関してはCSS3で表現しているので、比較的新しいブラウザに限定されます。

トグルの動きやクッキーによる動作の保持は、汎用性が高いのでとても便利だと思います。

記事のタイトルとURLをコピーする

シェアする

フォローする

CSSで作ったトグルボタンで開閉して状態を保持する
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!