指定の日付（もしくは日時）以降になったらHTMLの表示内容を書き換えるjQueryプラグイン、「xday.js」を紹介します。
指定日になったらJavascriptを用いてCSSのdisplayプロパティを切り替えるだけですので、コードを見られてしまうと指定日以前に内容を確認できてしまいます。カジュアルな切り替え機能として利用してみてください。
１．設置方法
(1) コンテンツの用意
「指定日前に表示するコンテンツ」と「指定日以降に表示するコンテンツ」をHTMLでコーディングします。指定日前に表示するコンテンツにはクラス名で「xday-before」を、指定日以降に表示するコンテンツにはクラス名で「xday-after」をつけます。
指定日前に表示するコンテンツ指定日以降に表示するコンテンツ
CSSでxday-afterを非表示にしておきます。
.xday-after {
display: none;
}
(2) ダウンロード
GitHubのサイトより「xday.js」をダウンロードします。
(3) サイトフォルダに配置
ダウンロードしたフォルダ内にある「xday.js」のみをサイトフォルダ内に配置します。
(4) jQueryとxday.jsの読み込み
jQuery本体とxday.jsをhead内で読み込みます。
https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js http://xday.js
(5) 日付の指定
上記の記述に続き、タグ内で表示を切り替えたい日付を指定します。
日付の場合には「2016/4/1」のようなフォーマットで、日時の場合には「2016/4/1 12:00」のように記述してください。
$(function() {
$('window').xday( '2016/4/1 12:00' );
});
これで指定の日付になったら「.xday-before」内のコンテンツから「.xday-after」内のコンテンツへ表示が切り替わります。
どうぞお試しください。