メモ20181019　アコーディオン最新_個人掲示板_zanmai.net

<style>
.Accordion {
  width: 100%;
  border: 1px solid blue;
  border-radius: 2px;
  display: inline-blcok;
}
.Accordion__menu {
  height: auto;
}
.Accordion > .Accordion__menu:first-child .Accordion__MenuLabel {
	border-top: 0;
}

.Accordion__MenuLabel {
	height: 2rem;
	line-height: 2rem;
	font-size: 1.1rem;
	padding: 0.45rem 0.5rem;
	display: block;
	cursor: pointer;
	color: #222;
	background: #eee;
	border-top: 1px solid #ccc;
	transition: 0.6s;
}
.Accordion__MenuLabel:hover {
	background: blue;
	color: #FFF;
	font-weight: bold;
	opacity: 0.8;
}

.Accordion__subMenuTrigger:checked ~ .Accordion__MenuLabel {
	background: blue;
	font-weight: bolder;
	opacity: 1;
	color: #FFF;
	transform: scale(1.002);
}
.Accordion__subMenuTrigger:checked ~ .Accordion__MenuLabel:after {
	content: "-";
	float: right;
	box-sizing: border-box;
}
.Accordion__subMenuTrigger:not(:checked) ~ .Accordion__MenuLabel:hover:after {
	content: "+";
	float: right;
	box-sizing: border-box;
}

.Accordion__subMenuTrigger {
  display: none;
}

.Accordion__subMenu {
  overflow: hidden;
  height: 0;
  transition: 0.6s;
}

.Accordion__subMenuTrigger:checked ~ .Accordion__subMenu {
  height: 2rem;
  line-height: 2rem;
  padding-left: 1rem;
}

.Accordion__subMenu span {
	width: 100%;
	margin: 0 auto;
	padding: 0.5rem 0;
	display: inline-block;
	float: right;
	height: 100%;
	font-size: 1rem;
	line-height: 100%;
	border-top: 1px solid #ccc;
	transition: 0.3s;
}
.Accordion__subMenu span:hover {
	cursor: pointer;
	background: lightblue;
	color: #FFF;
}
.Accordion__subMenu span:hover:after {
	content: "≫";
	float: right;
	box-sizing: border-box;
	margin-right: 0.5rem;
}

.Accordion__MenuLabel + .Accordion__subMenu span {
	border-top: 0px;
}


#demo-wrap {
	width: 400px;
	height: auto;
	display: inline-block;
}
</style>
<div id="demo-wrap">
<!-- アコーディオン Start -->
<div class="Accordion">
	<div class="Accordion__menu">
		<input id="accordionMenuTrigger-1" name="accordion" type="radio" class="Accordion__subMenuTrigger" checked>
		<label for="accordionMenuTrigger-1" class="Accordion__MenuLabel">About 便利ジャパン</label>
		<div class="Accordion__subMenu">
			<span>各種カレンダー</span>
		</div>
		<div class="Accordion__subMenu">
			<span>出欠席調整</span>
		</div>
		<div class="Accordion__subMenu">
			<span>中国式産み分け</span>
		</div>
		<div class="Accordion__subMenu">
			<span>郵便便号検索</span>
		</div>
	</div>

	<div class="Accordion__menu">
		<input id="accordionMenuTrigger-2" name="accordion" type="radio" class="Accordion__subMenuTrigger">
		<label for="accordionMenuTrigger-2" class="Accordion__MenuLabel">About IT三昧</label>
		<div class="Accordion__subMenu">
			<span>デモを見る</span>
		</div>
		<div class="Accordion__subMenu">
			<span>記事を見る</span>
		</div>
		<div class="Accordion__subMenu">
			<span>そのたを見る</span>
		</div>
	</div>
	
	<div class="Accordion__menu">
		<input id="accordionMenuTrigger-3" name="accordion" type="radio" class="Accordion__subMenuTrigger">
		<label for="accordionMenuTrigger-3" class="Accordion__MenuLabel">メニュー3</label>
		<div class="Accordion__subMenu">
			<span>IT三昧について</span>
		</div>
		<div class="Accordion__subMenu">
			<span>サイトマップ</span>
		</div>
	</div>  
</div>
<!-- //アコーディオン END -->
</div>

閉じる