【JavaScript】ホバーしたら横向きのアコーディオンが開閉する

2025年07月07日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は、以前の記事の変化球版を紹介します！

◆過去記事はコチラ（【JavaScript】クリックしたらアコーディオンが開閉して、プラスアイコンがマイナスアイコンに変化する）

横に開くアコーディオンがあったら、おしゃれなWEBサイトになると思いませんか？

実装したので、紹介します！

実装例

テキスト1
コンテンツ1コンテンツ1コンテンツ1
テキスト2
コンテンツ2コンテンツ2コンテンツ2
テキスト3
コンテンツ3コンテンツ3コンテンツ3

ちょっと本棚っぽくなって良い感じですね。

HTML例

<ul class="accordion-list">
    <li class="accordion-list-item">
        <div class="accordion-title">
            <div>
                <p>
                    テキスト1
                </p>
            </div>
        </div>
        <div class="accordion-box">
            <p>
                コンテンツ1コンテンツ1コンテンツ1
            </p>
        </div>
    </li>
    <li class="accordion-list-item">
        <div class="accordion-title">
            <div>
                <p>
                    テキスト2
                </p>
            </div>
        </div>
        <div class="accordion-box">
            <p>
                コンテンツ2コンテンツ2コンテンツ2
            </p>
        </div>
    </li>
    <li class="accordion-list-item">
        <div class="accordion-title">
            <div>
                <p>
                    テキスト3
                </p>
            </div>
        </div>
        <div class="accordion-box">
            <p>
                コンテンツ3コンテンツ3コンテンツ3
            </p>
        </div>
    </li>
</ul>

CSS例

.accordion-list {
    display: flex;
}
.accordion-list-item {
    height: 500px;
    display: flex;
    position: relative;
}
.accordion-box {
    width: 0;
    overflow: hidden;
    transition: width 0.3s ease;
    writing-mode: horizontal-tb;
    background: #f0f0f0;
}
.accordion-box p {
    padding: 10px;
    writing-mode: horizontal-tb;
    white-space: nowrap;
}
.accordion-title {
    padding: 20px;
    writing-mode: vertical-rl;
    cursor: pointer;
    color: #fff;
    background-color: #bbbbbb;
}
.accordion-list-item::before {
    content: "";
    width: 2px;
    height: 16px;
    background: #000;
    position: absolute;
    right: auto;
    left: 48px;
    top: auto;
    bottom:12.5px;
    margin: auto;
    transition: .6s ease;
}
.accordion-list-item::after {
    content: "";
    width: 16px;
    height: 2px;
    background: #000;
    position: absolute;
    right: auto;
    left: 41px;
    top: auto;
    bottom: 20px;
    margin: auto;
    transition: .6s ease;
}
.accordion-list-item.is-accordion--open::before {
    transform: rotate(90deg);
}
.accordion-list-item.is-accordion--open::after {
    transform: rotate(-180deg);
}

JavaScript例

const jsAccordions = document.querySelectorAll('.accordion-list-item');
let isAnimating = false;
jsAccordions.forEach(function (accordion) {
    const box = accordion.lastElementChild;
    box.addEventListener('transitionend', function() {
        isAnimating = false;
    });
    accordion.addEventListener('mouseenter', function () {
        if (isAnimating) {
            return;
        }
        isAnimating = true;
        const isOpen = accordion.classList.contains('is-accordion--open');
        if (isOpen) {
            isAnimating = false;
            return;
        }
        jsAccordions.forEach(function (otherAccordion) {
            const otherBox = otherAccordion.lastElementChild;
            otherBox.style.width = '0';
            otherAccordion.classList.remove('is-accordion--open');
        });
        box.style.width = 'auto';
        const width = box.scrollWidth + 'px';
        box.style.width = '0';
        setTimeout(() => {
            box.style.width = width;
        }, 10);
        accordion.classList.add('is-accordion--open');
    });
});