手風琴選單
提示
:checked
- 相鄰選擇器
position
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>
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;
}
Step 3
串接 label
與 input
<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>
Step 4
建立 .tab-content
連動樣式
.accrodion .tab .tab-content {
padding: 10px;
display: none;
}
.accrodion .tab input:checked ~ .tab-content {
display: block;
}
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: '-';
}
Step 6
隱藏 checkbox
.accrodion .tab input[type='checkbox'] {
display: none;
}
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>