Parts
開閉を利用したパーツ 1
- Parts
- 開閉を利用したパーツ
- 開閉を利用したパーツ 1
「accordion__content」というクラス名の中に隠す内容を入れる。
「label」のfoa名と「input」のid名は項目ごとにかぶらない名前を付ける。
「label」のfoa名と「input」のid名は項目ごとにかぶらない名前を付ける。
「accordion__content」というクラス名の中に隠す内容を入れる。
「label」のfoa名と「input」のid名は項目ごとにかぶらない名前を付ける。
「label」のfoa名と「input」のid名は項目ごとにかぶらない名前を付ける。
「accordion__content」というクラス名の中に隠す内容を入れる。
「label」のfoa名と「input」のid名は項目ごとにかぶらない名前を付ける。
「label」のfoa名と「input」のid名は項目ごとにかぶらない名前を付ける。
「accordion__content」というクラス名の中に隠す内容を入れる。
「label」のfoa名と「input」のid名は項目ごとにかぶらない名前を付ける。
<div class="accordionBox--type01">
<!--項目ここから-->
<div class="accordion">
<input type="checkbox" id="accordion--type01__label001" />
<label for="accordion--type01__label001">項目タイトル 01</label>
<div class="accordion__content">
<!--隠す中身ここから-->
項目タイトルをクリックすると現れる内容はここに書く。
<!--隠す中身ここまで-->
<!--//.accordion__content-->
</div>
<!--//.accordion-->
</div>
<!--//項目ここまで-->
<!--項目ここから-->
<div class="accordion">
<input type="checkbox" id="accordion--type01__label002" />
<label for="accordion--type01__label002">項目タイトル 02</label>
<div class="accordion__content">
<!--隠す中身ここから-->
項目タイトルをクリックすると現れる内容はここに書く。
<!--隠す中身ここまで-->
<!--//.accordion__content-->
</div>
<!--//.accordion-->
</div>
<!--//項目ここまで-->
<!--項目ここから-->
<div class="accordion">
<input type="checkbox" id="accordion--type01__label003" />
<label for="accordion--type01__label003">項目タイトル 03</label>
<div class="accordion__content">
<!--隠す中身ここから-->
項目タイトルをクリックすると現れる内容はここに書く。
<!--隠す中身ここまで-->
<!--//.accordion__content-->
</div>
<!--//.accordion-->
</div>
<!--//項目ここまで-->
<!--//.accordionBox-->
</div>
.accordionBox--type01 {
border-radius: 0.5em;
overflow: hidden;
border: #000 solid 1px;
}
.accordionBox--type01 .accordion + .accordion {
border-top: #000 solid 1px;
}
.accordionBox--type01 .accordion > label {
display: block;
padding: 0.9em 1em;
color: #000;
background: #fff;
cursor: pointer;
transition: all 0.5s;
position: relative;
}
.accordionBox--type01 .accordion > label::after {
content: "";
width: 0.8em;
height: 0.8em;
display: block;
border-right: #000 solid 0.2em;
border-bottom: #000 solid 0.2em;
transform: rotate(45deg);
position: absolute;
top: 50%;
right: 1.4em;
margin-top: -0.4em;
transition: all 0.5s;
}
.accordionBox--type01 .accordion > label:hover {
background: #ddd;
}
.accordionBox--type01 .accordion > input[type="checkbox"] {
display: none;
}
.accordionBox--type01 .accordion > .accordion__content {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}
.accordionBox--type01
.accordion
> input[type="checkbox"]:checked
+ label
+ .accordion__content {
height: auto;
padding: 0.5em 1em;
opacity: 1;
}
.accordionBox--type01 .accordion > input[type="checkbox"]:checked + label {
background: #ddd;
}
.accordionBox--type01
.accordion
> input[type="checkbox"]:checked
+ label::after {
transform: scale(1, -1) rotate(45deg);
}
.accordionBox--type01 {
border-radius: 0.5em;
overflow: hidden;
border: #000 solid 1px;
.accordion{
&+ .accordion {
border-top: #000 solid 1px;
}
&> label {
display: block;
padding: 0.9em 1em;
color: #000;
background: #fff;
cursor: pointer;
transition: all 0.5s;
position: relative;
&::after {
content: "";
width: 0.8em;
height: 0.8em;
display: block;
border-right: #000 solid 0.2em;
border-bottom: #000 solid 0.2em;
transform: rotate(45deg);
position: absolute;
top: 50%;
right: 1.4em;
margin-top: -0.4em;
transition: all 0.5s;
}
&:hover{
background: #ddd;
}
}
&> input[type="checkbox"] {
display: none;
&:checked + label{
background: #ddd;
&+ .accordion__content {
height: auto;
padding: 0.5em 1em;
opacity: 1;
}
&::after{
transform: scale(1, -1) rotate(45deg);
}
}
}
&> .accordion__content {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}
}
}
