Accordion / 027 — ソフトダブルボーダー

デザイン見本

Rounded corners for a friendly look
Subtle shadow creates depth
Independent styling for each item

角丸と柔らかな影（シャドウ）を組み合わせた、親しみやすいデザイン。展開時に少し浮き上がる動きが特徴で、クリック感を演出します。各項目が独立したカード型になっているため、リスト要素としても使いやすいです。

実装コード

HTML

<div class="container">
    <div class="wrapper">
        <div class="btn-box">
            <button data-default-text="Soft Double Border" data-open-text="Soft Double Border">Soft Double Border</button>
        </div>
        <div class="more">
            <ul>
                <li>Rounded corners for a friendly look</li>
                <li>Subtle shadow creates depth</li>
                <li>Independent styling for each item</li>
            </ul>
        </div>
    </div>
</div>

CSS

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.container .wrapper {
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.container .btn-box button {
    width: 100%;
    padding: 16px 20px;
    background: #fff;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container .btn-box button::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    color: #999;
    transition: transform 0.3s ease;
}

.container .btn-box button.active {
    color: #333;
    background: #fafafa;
}

.container .btn-box button.active::after {
    transform: rotate(45deg);
    color: #333;
}

.container .wrapper.open {
    border-color: #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.container .more {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fafafa;
}

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

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

.container .more li {
    padding: 8px 0;
    color: #666;
    font-size: 14px;
    border-bottom: 1px dashed #e0e0e0;
}

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

document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll('.wrapper').forEach(wrapper => {
        const button = wrapper.querySelector('.btn-box button');
        const content = wrapper.querySelector('.more');
        
        if (button && content) {
            button.addEventListener('click', function() {
                wrapper.classList.toggle('open');
                content.classList.toggle('appear');
                this.classList.toggle('active');
            });
        }
    });
});