Sponser Link
Sponser Link
目次
参考サイト
Sponser Link
HTML
HTML
<input id="acd-check1" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check1">クリックで開く1</label>
<div class="acd-content">
<p>hello.world!</p>
</div>
<input id="acd-check2" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check2">クリックで開く2</label>
<div class="acd-content">
<p>hello.world2!</p>
</div>
以下同じ
Sponser Link
CSS
CSS
.acd-check{
display: none;
}
.acd-label{
background: #333;
color: #fff;
display: block;
margin-bottom: 1px;
padding: 10px;
}
.acd-content{
border: 1px solid #333;
height: 0;
opacity: 0;
padding: 0 10px;
transition: .5s;
visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
height: 40px;
opacity: 1;
padding: 10px;
visibility: visible;
}
CSS
.acd-check{
display: none;
}
.acd-label{
background: #333;
color: #fff;
display: block;
margin-bottom: 1px;
padding: 10px;
}
.acd-label:after{
background: #00479d;
box-sizing: border-box;
content: '\f067';
display: block;
font-family: "Font Awesome 5 Free";
height: 52px;
padding: 10px 20px;
position: absolute;
right: 0;
top: 0px;
}
.acd-content{
border: 1px solid #333;
height: 0;
opacity: 0;
padding: 0 10px;
transition: .5s;
visibility: hidden;
}
.acd-check:checked + .acd-label:after{
content: '\f068';
}
.acd-check:checked + .acd-label + .acd-content{
height: 40px;
opacity: 1;
padding: 10px;
visibility: visible;
}
Sponser Link