Parts

Parts

開閉を利用したパーツ 4

Q

項目タイトル 01 質問

A

ここに質問の答えがはいります 
ここに質問がはいりますここに質問がはいります
ここに質問がはいりますここに質問がはいります
コードの詳細はこちら

Q

項目タイトル 02 質問

A

ここに質問の答えがはいりますここに質問がはいりますここに質問がはいりますここに質問がはいりますここに質問がはいりますここに質問がはいりますここに質問がはいりますここに質問がはいりますここに質問がはいります

「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;
    }
  }
}
                
ページ上部に戻るスプーン