<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>