Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width,init-scale=1"> <link rel="stylesheet" href= "https://www.example.com.vn/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>Nút đàn accordion</h2> <p>Bạn có thể sử dụng bất kỳ HTML nào yếu tố để mở nội dung accordion. Chúng tôi thích nút có lớp khối w3 hơn vì nó trải dài toàn bộ chiều rộng của phần tử gốc, giống như nội dung đàn accordion (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.</p> <button onclick="myFunction('Demo1')" class="w3-button w3-light-grey"> Nút bình thường</button> <div id= "Demo1" class="w3-hide w3-container w3-light-grey"> <p>Lorem ipsum...</p> </div> <button onclick="myFunction('Demo2')" class=" w3-button w3-block w3-left-align w3-green"> Căn trái và toàn chiều rộng</button> <div id="Demo2" class="w3-hide w3-container"> <p>Lorem ipsum. ..</p> </div> <button onclick="myFunction('Demo3')" class="w3-btn w3-block w3-red"> Căn giữa và toàn chiều rộng</button> <div id=" Demo3" class="w3-hide w3-container w3-center w3-pale-red"> <p>Nội dung được căn giữa!</p> </div> </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> </body> </html>