CSSが得意な渋谷のウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQuery不要 CSS3でトグルTOGGLE

原理:通常時はheight:0; overflow: hidden;でコンテンツを隠しチェックボックスにチェックが入った時にスタイルでコンテンツを表示。 機能だけをシンプルにデモを作りました。スタイルはお好みで。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML

<input id="toggle" type="checkbox" name="whatever" />
<label for="toggle">CLICK HERE TO TOGGLE</label>
<p>ここにコンテンツ </p>

デフォルトで開示状態にしたい場合はname="whatever"を削除

CSS

input {
display: none;
}
input:checked + label {//チェックボックス選択時
color:red;
}
label{
cursor: pointer;
display: block;
}
input:checked + label + p{//チェックボックス選択時のコンテンツ
height:55px;
}
p{
height:0;
overflow: hidden;
-moz-transition: height 0.5s ease-in-out 0s;
}
関連記事
この記事役にたった?
管理者にだけメッセージを送る

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。