Hiệp định W3.CSS
Nhấp vào các nút "Mở Phần" bên dưới để xem cách đàn accordions hoạt động:
Bản thân nỗi đau là quan trọng, nhưng nỗi đau được tăng cường bởi quá trình tạo mỡ, nhưng tôi cho nó thời gian để cắt giảm nó để tôi làm một số công việc lớn và nỗi đau. Vì mục đích tối thiểu, ai trong chúng ta nên thực hiện bất kỳ công việc nào ngoại trừ việc tận dụng những hậu quả từ việc đó.
Phù hợp với hình ảnh:
Alps của Pháp
Accordion
Đàn accordion được sử dụng để hiển thị (và ẩn) nội dung HTML.
Sử dụng lớp w3-hide để ẩn nội dung của đàn accordion.
Sử dụng bất kỳ loại nút nào để mở và đóng nội dung:
Thí dụ
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Open Section 1</button>
<div id="Demo1" class="w3-container
w3-hide">
<p>Some text..</p>
</div>
<script>
function myFunction(id) {
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
Cả phần tử được sử dụng để mở đàn accordion và nội dung của đàn accordion đều có thể là bất kỳ phần tử HTML nào.
Accordion so với Dropdown
Bảng này cho thấy sự khác biệt giữa đàn accordion và danh sách thả xuống:
| Accordion | Trình đơn thả xuống |
|---|---|
| Nội dung đẩy nội dung trang xuống | Nội dung nằm trên nội dung trang hiện có |
| Nội dung thường rộng 100% | Nội dung rộng 160px (mặc định) |
| Thường dùng để mở nhiều phần | Thường được sử dụng để mở một phần |
Hợp đồng
Bản thân nỗi đau là quan trọng, nhưng nỗi đau được tăng cường bởi quá trình tạo mỡ, nhưng tôi cho nó thời gian để cắt giảm nó để tôi làm một số công việc lớn và nỗi đau. Vì mục đích tối thiểu, ai trong chúng ta nên thực hiện bất kỳ công việc nào ngoại trừ việc tận dụng những hậu quả từ việc đó.
Trình đơn thả xuống
Các nút Accordion
Bạn có thể sử dụng bất kỳ phần tử HTML nào để mở nội dung đàn accordion. Chúng tôi thích một nút có lớp w3-block , để kéo dài toàn bộ chiều rộng của trang (100% chiều rộng).
Hãy nhớ rằng các nút trong W3.CSS được căn giữa theo mặc định. Sử dụng lớp w3-left-align nếu bạn muốn chúng được căn trái. Tuy nhiên, bạn không cần phải làm theo cách tiếp cận của chúng tôi - một chiếc đàn accordion sẽ trông đẹp theo cả hai cách:
Lorem Ipsum ...
Lorem Ipsum ...
Nội dung tập trung là tốt!
Thí dụ
<button onclick="myFunc('Demo1')"
class="w3-button">
Normal button</button>
<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align
w3-green">
Left aligned and full-width</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
Centered and full-width</button>
<div id="Demo3"
class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>
Các nút Active Accordion
Sử dụng JavaScript để làm nổi bật các accordions đang mở (được nhấp vào):
Một số tiếp theo..
Một số văn bản khác ..
Thí dụ
// Add the w3-red class to all opened accordions
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += "
w3-red";
} else {
x.className = x.className.replace("w3-show",
"");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}
Chiều rộng Accordion
Theo mặc định, chiều rộng của khối là 100%. Để ghi đè điều này, hãy thay đổi thuộc tính chiều rộng CSS của vùng chứa accordion:
Một số tiếp theo..
Một số tiếp theo..
Một số tiếp theo..
Một số tiếp theo..
Thí dụ
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>
Nội dung Accordion
Phù hợp với các liên kết:
Thí dụ
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 3</a>
</div>
Accordion dưới dạng một danh sách:
- Jill
- đêm
- Adam
Thí dụ
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
Accordion bên trong thanh bên (Bạn sẽ tìm hiểu thêm về thanh bên sau):
Thí dụ
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div
id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
Hiệp ước hoạt hình
Sử dụng bất kỳ lớp w3-animate- nào để làm mờ dần, thu phóng hoặc trượt trong nội dung đàn accordion:
Thí dụ
<div id="Demo1" class="w3-hide
w3-animate-zoom">