【JS/CSS】よくある質問などに使えるアコーディオンボックス

シンプルなアコーディオン開閉ボックス
  • URLをコピーしました!
目次(クリックでジャンプ)

【JS/CSS】よくある質問などに使えるアコーディオンボックス

HTMLコード

<div class="c__acc js-acc-item">
   <p class="c__acc__ttl js-acc-single-trigger">バナナはおやつにはいりますか?</p>
      <div class="c__acc__content">
         <p>はい、もちろんです。バナナはおやつに入ります。</p>
      </div>
</div>

CSS

下記コードはSCSSで記述していますCSSでコードを使いたい方は、手動またはツール等でCSSに変換して使ってください。
オンラインSCSS→CSSコンバーター
SCSSをCSSにリアルタイムで変えるツール

.c__acc {
   background: #fff;
   padding: 1rem 2rem;
   width: 100%;
   max-width: 800px;
   margin: 1rem auto 0;
   border: solid 1px grey
   border-radius: 2rem;
   &__ttl {
     font-weight: bold;
     font-size: 1.2rem;
     margin-bottom: 0;
     cursor: pointer;
     position: relative;
     padding-right: 2rem;
     &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 40%;
        transition: all 0.2s ease-in-out;
        display: block;
        width: 10px;
        height: 10px;
        border-top: solid 2px #1c1c1c;
        border-right: solid 2px #1c1c1c;
        transform: translateY(-50%) rotate(135deg);
      }
    }
    &__content {
       max-height: 0;
       overflow: hidden;
       transition: .3s;
    }
    &.is-open {
       .c__acc__content {
        max-height: max-content;
        padding-top: 0.5rem;
    }
    .c__acc__ttl::after {
        transform: translateY(-50%) rotate(315deg);
     }
   }
}

JS

function acc() {
    //アコーディオンメニュー
    const accSingleTriggers = document.querySelectorAll('.js-acc-single-trigger');
    accSingleTriggers.forEach(trigger => trigger.addEventListener('click', toggleAccordion));
    function toggleAccordion() {
        const items = document.querySelectorAll('.js-acc-item');
        const thisItem = this.parentNode;
        items.forEach(item => {
            if (thisItem == item) {
                thisItem.classList.toggle('is-open');
                return;
            }
            item.classList.remove('is-open');
        });
    }
} acc();
おすすめのフリーランス向け求人・案件探しサービス

高単価案件、週3日~などフレキシブルな働きが可能な事が特徴の転職サービスです。案件をチェックするだけであれば無料の為、エンジニアやデザイナーの方は是非登録してみてください。

4275件と案件数豊富です(2024年4月現在)
シンプルなアコーディオン開閉ボックス

この記事が気に入ったら
フォローしてね!

役に立った!と思ったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フリーランスのWebデザイナー「Kizineko」です。Webサイトのデザイン~コーディング、簡易的なプログラム実装等、Web制作に係る広くに携わっております。当ブログでは日々のメモ帳として便利なコードなどを共有しております。

目次(クリックでジャンプ)