Bloosh Company

記事のサムネイル画像です。

2019年6月19日

Development>フロントエンド

cssだけで作るアコーディオンメニュー

,

じゅげむじゅげむ ごこうのすりきれ かいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつ くうねるところにすむところ やぶらこうじのぶらこうじ ぱいぽぱいぽぱいぽのしゅーりんがん しゅーりんがんのぐーりんだい ぐーりんだいのぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ

チェックを入れたり外したりしてみてね!

HTML部分だよ

<div id="checkbox_wrap">
	<input id="info_input" type="checkbox" name="info" >
	<label for="info" class="info_label">Information</label>
	<div class="" id="info_content">
		<p>じゅげむじゅげむ ごこうのすりきれ かいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつ くうねるところにすむところ やぶらこうじのぶらこうじ ぱいぽぱいぽぱいぽのしゅーりんがん しゅーりんがんのぐーりんだい ぐーりんだいのぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ</p>
	</div>
</div>

css部分だよ


#checkbox_wrap{
	margin: 0 auto;
	width:100%;
	max-width:500px;
	cursor: pointer;
	border: 3px solid darkgray;
	position: relative;
	border-radius: 3px;
	padding: 5% 3%;
	box-shadow: 0 0 2px #ccc;
	background-color: #CCCCFF;
}
#info_input, #info_label{
	display:inline;
}

#info_content {
	transition: max-height 0.5s ease-in-out, border 0s linear 0.5s;
	border-top: 0px solid #000;
	max-height: 0;
	overflow: hidden;
}#info_input:checked ~ #info_content{
	transition: max-height 0.5s ease-in-out, border 0s linear 0s;
	border-top: 3px solid darkgray;
	max-height: 9999px;
}

inputdisplay:noneで非表示にしたり、labelのあと疑似要素のafterでアイコンを入れたりすれば、もっとオシャンになるよ。#info_input:checked ~ #info_labelにすれば、チェックのオンオフで違うアイコンを表示できるよ。

CSSのほうが高速らしいので、最近なるべくjavascriptを使わないように心掛けています。

cssだけで作るアコーディオンメニュー | ブルーシュカンパニー

<<次の記事

magentoのcollection系の小技!

前の記事>>

[display:flex]フッターの高さが分からないときでも常に最下部に表示する