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

[PR] Another American Dictionary Spanglish with us!

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;
}
関連記事
この記事役にたった?
管理者にだけメッセージを送る