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

2025年10月14日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

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

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

◆過去記事はコチラ（【JavaScript】ホバーしたら横向きのアコーディオンが開閉する）

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

実装例

テキスト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-title');
jsAccordions.forEach(function (accordion) {
    accordion.addEventListener('click', function () {
        const box = accordion.nextElementSibling;
        const isOpen = accordion.parentNode.classList.contains('is-accordion--open');
        jsAccordions.forEach(function (otherAccordion) {
            const otherBox = otherAccordion.nextElementSibling;
            otherBox.style.width = '0';
            otherAccordion.parentNode.classList.remove('is-accordion--open');
        });
        if (!isOpen) {
            box.style.width = 'auto';
            const width = box.scrollWidth + 'px';
            box.style.width = '0';
            setTimeout(() => {
                box.style.width = width;
            }, 10);
            accordion.parentNode.classList.add('is-accordion--open');
        }
    });
});