Parts
項目タイトル 01 質問
ここに質問の答えがはいります
ここに質問がはいりますここに質問がはいります
ここに質問がはいりますここに質問がはいります
コードの詳細はこちら
項目タイトル 02 質問
ここに質問の答えがはいりますここに質問がはいりますここに質問がはいりますここに質問がはいりますここに質問がはいりますここに質問がはいりますここに質問がはいりますここに質問がはいりますここに質問がはいります
「accordion__content」というクラス名の中に隠す内容を入れる。
<div class="accordionBox--type05">
<details class="accordion">
<summary class="accordion__button">
<span>Q</span><p>項目タイトル 01 質問</p>
<!-- /.accordion__button --></summary>
<div class="accordion__content">
<span>A</span><p>ここに質問の答えがはいります</p>
<!-- /.accordion__content --></div>
<!-- /.accordion --></details>
<details class="accordion">
<summary class="accordion__button">
<span>Q</span><p>項目タイトル 02 質問</p>
<!-- /.accordion__button --></summary>
<div class="accordion__content">
<span>A</span><p>ここに質問02の答えがはいります</p>
<!-- /.accordion__content --></div>
<!-- /.accordion --></details>
<!--//.accordionBox--></div>
.accordionBox--type05 {
display:block;
border-top:1px solid #DDD;
.accordion {
border-bottom:1px solid #DDD;
}
.accordion[open] {
.accordion__button::before{
background-size: 40% 8%, 0 40%;
}
}
.accordion__button{
display:block;
position:relative;
padding:1em 2.5em 1em 2em;
cursor:pointer;
&:hover p{
color:#DDD;
}
&::before{
content: "";
box-sizing: border-box;
position: absolute;
right: 0.5em;
top: 50%;
width: 2em;
height: 2em;
transform: translateY(-50%);
border-radius: 50%;
border: 1px solid #DDD;
background-image:
linear-gradient(#000 0 0),
linear-gradient(#000 0 0);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 40% 6%, 6% 40%;
transition: background-size .3s;
}
>span{
display:inline-block;
font-size:1.1em;
font-weight:bold;
color:#666;
position:absolute;
top:0.8em;
left:0.5em;
}
p{
margin-bottom:0;
font-weight:bold;
transition:color 0.3s;
}
}
.accordion__content{
display:block;
position:relative;
padding:0 1em 1em 2em;
>span{
display:inline-block;
font-size:1.1em;
font-weight:bold;
color:#AAA;
position:absolute;
top:0.1em;
left:0.5em;
}
p{
margin-bottom:0;
}
}
}