Accordion / 032 — ステッパー

デザイン見本

Clear Step-by-Step Flow
Numbered Badge on the Left
Clean Process Visualization

左端にインディゴの番号バッジを配置したステッパーデザインです。チュートリアルや手順説明に最適で、`▸` が90°回転して開閉状態を直感的に伝えます。コンテンツはボタン本文と揃うよう左インデントされ、整理された見た目を保ちます。

実装コード

HTML

<div class="container">
    <div class="btn-box">
        <button data-default-text="Numbered Step Title" data-open-text="Close">Numbered Step Title</button>
    </div>
    <div class="more">
        <ul>
            <li>Clear Step-by-Step Flow</li>
            <li>Numbered Badge on the Left</li>
            <li>Clean Process Visualization</li>
        </ul>
    </div>
</div>

CSS

.container {
    position: relative;
}

.container .btn-box button {
    width: 100%;
    padding: 16px 48px 16px 68px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: left;
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.container .btn-box button::before {
    content: '01';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: #6366f1;
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    line-height: 36px;
    text-align: center;
}

.container .btn-box button::after {
    content: '▸';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6366f1;
    font-size: 16px;
    transition: transform 0.3s;
}

.container:has(.more.appear) .btn-box button::after {
    transform: translateY(-50%) rotate(90deg);
}

.container .btn-box button:hover {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.container .more {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #f9fafb;
    border-radius: 0 0 10px 10px;
    border: 1px solid #e5e7eb;
    border-top: none;
    margin-top: -4px;
    padding-left: 68px;
}

.container .more.appear {
    max-height: 200px;
}

.container .more ul {
    list-style: none;
    padding: 14px 16px 14px 0;
    margin: 0;
}

.container .more li {
    padding: 6px 0 6px 12px;
    color: #6b7280;
    font-size: 13px;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
}

.container .more li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #6366f1;
    border-radius: 50%;
}

.container .more li:last-child {
    border-bottom: none;
}

(function () {
    var container = document.querySelector('.container');
    if (!container) return;
    var button = container.querySelector('.btn-box button');
    var content = container.querySelector('.more');

    if (button && content) {
        button.addEventListener('click', function () {
            content.classList.toggle('appear');

            if (content.classList.contains('appear')) {
                this.textContent = this.dataset.openText || 'Close';
            } else {
                this.textContent = this.dataset.defaultText;
            }
        });
    }
})();