手風琴選單

demo

提示

Step 1

建立 html 架構

<div class="accrodion">
    <div class="tab">
        <input type="checkbox" />
        <label for="">One</label>
        <div class="tab-content">Hello 1</div>
    </div>
</div>

demo

Step 2

定義基本樣式

.accrodion {
    width: 800px;
    margin: 20px auto;
}

.accrodion .tab {
    border: 1px solid #1459e3;
}

.accrodion .tab label {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 10px;
    background: #1459e3;
    color: #fff;
    font-size: 20px;
}

.accrodion .tab .tab-content {
    padding: 10px;
}

demo

Step 3

串接 labelinput

<div class="accrodion">
    <div class="tab">
        <input type="checkbox" id="tab-1" />
        <label for="tab-1">One</label>
        <div class="tab-content">Hello 1</div>
    </div>
</div>

demo

Step 4

建立 .tab-content 連動樣式

.accrodion .tab .tab-content {
    padding: 10px;
    display: none;
}

.accrodion .tab input:checked ~ .tab-content {
    display: block;
}

demo

Step 5

建立 label 符號

.accrodion .tab label {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 10px;
    background: #1459e3;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    position: relative;
}

.accrodion .tab label::after {
    content: '+';
    position: absolute;
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
    top: 0;
    font-size: 30px;
}

.accrodion .tab input:checked ~ label::after {
    content: '-';
}

demo

Step 6

隱藏 checkbox

.accrodion .tab input[type='checkbox'] {
    display: none;
}

demo

done

複製兩個 tab 更改 id

<div class="accrodion">
    <div class="tab">
        <input type="checkbox" id="tab-1" />
        <label for="tab-1">One</label>
        <div class="tab-content">Hello 1</div>
    </div>
    <div class="tab">
        <input type="checkbox" id="tab-2" />
        <label for="tab-2">TWO</label>
        <div class="tab-content">Hello 2</div>
    </div>
    <div class="tab">
        <input type="checkbox" id="tab-3" />
        <label for="tab-3">THREE</label>
        <div class="tab-content">Hello 3</div>
    </div>
</div>

demo