Hiệp định W3.CSS
Nhấp vào nút "Mở phần" bên dưới để xem cách hoạt động của đàn accordion:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch.
Accordion với hình ảnh:
dãy Alps thuộc Pháp
Đàn xếp
Đà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 đàn accordion.
Sử dụng bất kỳ loại nút nào để mở và đóng nội dung:
Ví 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 vs Dropdown
Bảng này cho thấy sự khác biệt giữa đàn accordion và đàn thả xuống:
| Đàn xếp | 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 dùng để mở một phần |
đàn accordion
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch.
Danh sách thả xuống
Nút đàn 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 khối w3 , để trải rộng toàn bộ chiều rộng của trang (chiều rộng 100%).
Hãy nhớ rằng các nút trong W3.CSS được căn giữa theo mặc định. Thay vào đó, hãy 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 mắt:
Lorem ipsum...
Lorem ipsum...
Nội dung tập trung là tốt!
Ví 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>Nút Accordion hoạt động
Sử dụng JavaScript để đánh dấu các đàn accordion đang mở (đã nhấp vào):
Một số tiếp theo..
Một số văn bản khác..
Ví 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 của đàn 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 độ 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..
Ví 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 đàn accordion
Accordion với các liên kết:
Ví 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 như một danh sách:
- Jill
- Đêm
- Adam
Ví 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):
Ví 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>Accordion hoạt hình
Sử dụng bất kỳ lớp w3-animate- nào để làm mờ, thu phóng hoặc trượt trong nội dung đàn accordion:
