100%);background:#EFEFEF}パソコン、スマホ、アプリ、ゲーム、ウェブのニュースや記事などをお伝えします。2015.11.30スマートフォンで画面が小さいので、情報のあるエリアをボタンで開閉しつつ状態を保持したい、という場合があると思います。今回はCSSで作ったトグルボタンで指定したエリアを開閉し、なおかつ状態を保持する方法をご紹介いたします。目次サンプルソースと解説jshtmlcss全ソースまとめサンプル「お知らせ」をクリックすると開閉し、ブラウザを更新しても開閉の状態が保持されます。サンプルをご覧ください。サンプルソースと解説ソースはjs、html、cssの3つとなります。}});「#toggle」要素をクリックしたときにクッキーがセットされ、状態が保持されることになります。クッキーの判定が行われ、要素を隠す状態を保持するために「d_none」のクラスで非表示を行っています。「toggle(‘fast’)」で開閉する速度を決定しています。「fast」で速く、「slow」で遅くなります。htmlボタン、開閉するエリア、オプションで存在するであろう「もっと見る」要素に分かれています。</a></p>ボタン部分です。お知らせ</h2>非表示される部分です。href="#">お知らせ3</a></li></ul>オプションの「もっと見る」部分です。</a></p>cssデフォルトの打ち消しと、トグルボタン、オプションの「もっと見る」、非表示に使用する「display」のスタイルに分かれます。none;}デフォルトのスタイルを打ち消しています。0;}トグルボタンの基本プロパティです。*/}「.toggle」の「:before」疑似要素でボタンの右端にある三角アイコンを表現しています。none;」で行っています。none;}全ソースjqueryは「jquery-1.11.3.min.js」と「jquery.cookie.js」を使用しています。</a></p></body></html>まとめソースはjs、html、cssの3つ。「#toggle」要素をクリックしたときにクッキーがセットされ、状態が保持される。要素を隠す状態を保持するために「d_none」のクラスで非表示を行っている。「toggle(‘fast’)」で開閉する速度を決定している。「fast」で速く、「slow」で遅くなる。jqueryは「jquery-1.11.3.min.js」と「jquery.cookie.js」を使用。ボタンの表示に関してはCSS3で表現しているので、比較的新しいブラウザに限定されます。トグルの動きやクッキーによる動作の保持は、汎用性が高いのでとても便利だと思います。jQueryスポンサーリンクシェアするTwitterFacebookはてブPocketLINEボヘミアンをフォローするこの記事が気に入ったらいいね!しよう最新情報をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。コメントデータの処理方法の詳細はこちらをご覧ください。アプリ相互リンクWebGeekers自由空間。SPACEオールフリーソフトフリーソフトラボ.com最近のコメントボヘミアン2020.02.22当サイトへお越しいただきありがとうございます。私は試していませんが、下記のサイトでは認識出来ている...Steamのゲームデータを外付けのハードディスクに移動して起動する人骨マン2020.02.22すみませんこの方法だと新pcに引っ越す時に外付けHDDのフォルダを選択すればすぐに起動出来ますかSteamのゲームデータを外付けのハードディスクに移動して起動するボヘミアン2020.01.22当サイトへお越しいただきありがとうございます。NTTに連絡をして再度おくっていただけるように、お願...NTT東日本からレンタル機器の返却用キットが届いたので、返送の準備をしてみた多田和弘2020.01.21返却no.301000042104084です。