アコーディオンパーツ（Q&A）とか

公開日 2021/3/9 最終更新日 2021/5/9

クリックすると
プルダウンで要素が現れる。

プラスもマイナスになったりする。

HTML
SCSS
js

HTML

 <h2 class="tac fade">Q&A</h2>
   <div class="qa-box fade">
       <dl class="qa-item">
           <dt class="q-area">
      <span class="q__icon">Q</span>
      <p>質問質問質問？</p>
      <span class="accordion__icon"></span>
           </dt>
           <dd class="a-area">
      <div class="a-area-in">
          <p>回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答</p>
      </div>
           </dd>
       </dl>
       <dl class="qa-item">
           <dt class="q-area">
      <span class="q__icon">Q</span>
      <p>質問質問質問？<br>また、質問は質問質問？</p>
      <span class="accordion__icon"></span>
           </dt>
           <dd class="a-area">
      <div class="a-area-in">
          <p>回答回答回答回答回答回答回答回答回答回答回答
          </p>
      </div>
           </dd>
       </dl>
       <dl class="qa-item">
           <dt class="q-area">
      <span class="q__icon">Q</span>
      <p>質問質問質問？</p>
      <span class="accordion__icon"></span>
           </dt>
           <dd class="a-area">
      <div class="a-area-in">
          <p>回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答</p>
      </div>
           </dd>
       </dl>
       <dl class="qa-item">
           <dt class="q-area">
      <span class="q__icon">Q</span>
      <p>質問質問質問？</p>
      <span class="accordion__icon"></span>
           </dt>
           <dd class="a-area">
      <div class="a-area-in">
          <p>回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答</p>
      </div>
           </dd>
       </dl>
       <dl class="qa-item">
           <dt class="q-area">
      <span class="q__icon">Q</span>
      <p>質問質問質問？</p>
      <span class="accordion__icon"></span>
           </dt>
           <dd class="a-area">
      <div class="a-area-in">
          <p>回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答</p>
      </div>
           </dd>
       </dl>
       <dl class="qa-item">
           <dt class="q-area">
      <span class="q__icon">Q</span>
      <p>質問質問質問？</p>
      <span class="accordion__icon"></span>
           </dt>
           <dd class="a-area">
      <div class="a-area-in">
          <p>回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答</p>
      </div>
           </dd>
       </dl>
   </div>

SCSS

.qa-box {
            max-width: 612px;
            margin-left: auto;
            @include mq(lg) {
                margin: 0 auto;
            }
            .qa-item {
                background-color: #fff;
                padding: 16px;
                margin-bottom: 32px;
                &:hover {
                    cursor: pointer;
                }
                @include mq(xl) {
                    margin-right: 20px;
                }
                @include mq(lg) {
                    margin-left: 20px;
                }
                @include mq(md) {
                    margin-right: 17px;
                    margin-left: 16px;
                }

                border-radius: 4px;
                .q-area {
                    display: flex;
                    cursor: pointer;
                    position: relative;
                    .q__icon {
                        color: #fff;
                        font-family: $font-family-en;
                        font-weight: 400;
                        background-color: #3b69ff;
                        padding: 0 6px;
                        border-radius: 50%;
                        margin-right: 16px;
                        height: 24px;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    p {
                        font-weight: bold;
                        margin-left: 41px;
                    }

                    .accordion__icon {
                        position: absolute;
                        top: 50%;
                        right: -4px;
                        transform: translateY(-50%);
                        display: block;
                        width: 30px;
                        height: 24px;
                        text-indent: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                    .accordion__icon:before,
                    .accordion__icon:after {
                        display: block;
                        content: "";
                        background-color: #3b69ff;
                        position: absolute;
                        width: 15px;
                        height: 3px;
                        top: 50%;
                        right: -4px;
                        transform: translate(-50%, -50%);
                    }
                    .accordion__icon:before {
                        width: 3px;
                        height: 15px;
                        transition: 0.3s;
                        right: 8px;
                    }
                }
                .selected {
                    .accordion__icon:before {
                        transform: rotateZ(90deg);
                        top: 17%;
                        right: 10px;
                    }
                }
                .a-area {
                    display: none;
                    .a-area-in {
                        background-color: #3b69ff33;
                        padding: 12px;
                        border-radius: 4px;
                        margin-top: 13px;
                        padding-left: 20px;
                        @include mq(md) {
                            padding: 9px;
                        }
                    }
                }
            }
            .q-and-a dt {
                cursor: pointer;
                color: #fff;
            }

            .q-and-a dd {
                display: none;
                margin: 0;
            }
        }

js

$(function () {
  $('.qa-item').on('click', function () {
    $(this).children('.q-area').toggleClass('selected');
    $(this).children('.a-area').slideToggle();
  });
});

jsはクリックしたら
クラスを付与するのと
隠れている要素をスライドダウンさせることしかしていません。