Bootstrap-展開Collapse & Accordion
概念
- 給予一個button
- 在collapse-content(事件作用目標物)上面給予一個id
- 在button標籤中，用bootstrap自訂屬性
data-toggle定義觸發事件，以及與data-target定義作用的目標物
Collapse實作
- 預設值為關閉collapse狀態，若要預設為展開開狀態，可以添加
show1
2
3
4
5
6
7
8
| <div class="card">
<button data-toggle="collapse" data-target="#collapse1">
Button 1
</button>
<div id="collapse1" class="collapse"
Collapse-content-1
</div>
</div>
|
Accordion
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <div id="accordion">
<div class="card">
<div class="card-header">
<div href='#collapse1' data-toggle="collapse" data-parent="#accordion">
Button 1
</div>
</div>
<div id="collapse1" class="collapse show">
<div class="card-body">
Collapse-content-1
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div href='#collapse1' data-toggle="collapse" data-parent="#accordion">
Button 2
</div>
</div>
<div id="collapse2" class="collapse">
<div class="card-body">
Collapse-content-2
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div href='#collapse3' data-toggle="collapse" data-parent="#accordion">
Button 3
</div>
</div>
<div id="collapse1" class="collapse">
<div class="card-body">
Collapse-content-3
</div>
</div>
</div>
|
成果
My Project-LonelyPlanet-Mission section
