マイナビ

質問

マイナビの八幡や亀田製菓（製造）の質問のところ

HTML

    
<dl class="question__detail">

    <div class="question__item">
        <dt>
            <div class="iconFlex">
                <span class="icon-q"></span>
                <p class="txt">質問（テスト）</p>
            </div>
        </dt>
        <dd style="max-height: 0px;">
            <div class="iconFlex">
                <span class="icon-a"></span>
                <p class="txt">答え</p>
            </div>
        </dd>
    </div><!-- question__item -->

    <div class="question__item">
        <dt>
            <div class="iconFlex">
                <span class="icon-q"></span>
                <p class="txt">質問（テスト）</p>
            </div>
        </dt>
        <dd>
            <div class="iconFlex">
                <span class="icon-a"></span>
                <p class="txt">答え</p>
            </div>
        </dd>
    </div><!-- question__item -->

</dl>

CSS

    

.question__item {
    margin-bottom: 40px;

    overflow: hidden;

    &:last-child {
        margin-bottom: 0;
    }

    dt {
        position: relative;
        font-size: var(--font17);
        border-radius: var(--borderRadius10);
        cursor: pointer;
        transition: var(--transitionBase01);
        background-color: var(--gray);

        &::before,
        &::after {
            position: absolute;
            content: "";
            width: 30px;
            height: 2px;
            background-color: var(--black);
            top: 50%;
            right: 5%;
            transform: translateY(-50%);
            transition: var(--transitionBase02);
        }

        &::after {
            transform: translateY(-50%) rotate(90deg);
        }

        &:hover {
            opacity: var(--opacity07);
        }
    }

    dd {
        position: relative;
        font-size: var(--font17);

        max-height: 0;
        overflow: hidden;
        transition: var(--transitionBase02);

        .iconFlex {
            padding: 17px 15px 0 15px;

        }
    }
}

.open {
    dt {
        &::before {
            transform: translateY(-50%) rotate(180deg);
        }

        &::after {
            transform: translateY(-50%) rotate(360deg);
        }
    }
}

.iconFlex {
    display: flex;
    align-items: flex-start;
    padding: 17px 80px 15px 15px;
    gap: 15px;

    .txt {
        flex: 1;
        padding-top: 0.7em;
        text-align: left;
        line-height: 1.47;
    }
}

.icon-q,
.icon-a {
    position: relative;
    display: block;
    width: 2.8em;
    aspect-ratio: 1;
    border-radius: var(--borderRadiusCircle);

    &::before {
        position: absolute;
        font-size: var(--font24);
        color: var(--black);
        line-height: 1;
        top: 50%;
        left: 50%;

    }
}

.icon-q {
    background-color: var(--white);

    &::before {
        content: "Q";
        transform: translate(-50%, -63%);
    }
}

.icon-a {
    background-color: var(--gray);

    &::before {
        content: "A";
        transform: translate(-50%, -55%);
    }
}

JavaScript

    
/*******************************************
アコーディオン
*******************************************/
// .btn-outer-test → クリック要素
// .test__item → 開閉対象とクリック要素を囲む（.openがつく）
// .test__acoBox → 開閉対象（これに余白つけない 直下に余白つける）

document.querySelectorAll('.question__item dt').forEach(btn => {
  btn.addEventListener('click', () => {
    const box = btn.closest('.question__item');
    const main = box.querySelector('.question__item dd');

    if (!main) return;

    let isOpening = !box.classList.contains('open');
    box.classList.toggle('open', isOpening);

    if (isOpening) {
      // 開く
      main.style.maxHeight = main.scrollHeight + "px";
    } else {
      // 閉じる
      main.style.maxHeight = main.scrollHeight + "px"; // 一旦固定
      requestAnimationFrame(() => {
        main.style.maxHeight = "0px";
      });
    }
  });
});