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> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="https://maxcdn. bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" ></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class= "container"> <h2>Ví dụ về đàn accordion</h2> <p><strong>Lưu ý:</strong> Thuộc tính <strong>data-parent</strong> đảm bảo rằng tất cả các phần tử có thể thu gọn trong phần tử gốc được chỉ định sẽ bị đóng khi một trong các mục có thể thu gọn được hiển thị.</p> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> < h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Nhóm có thể thu gọn 1</a> </h4> </div> <div id="collapse1" class="panel-collapselapse in"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minm veniam, quis nostrud exermination ullamco labis nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading "> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Nhóm có thể thu gọn 2</a> </h4> </div > <div id="collapse2" class="panel-collapselapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minm veniam, quis nostrud exermination ullamco labis nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading "> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Nhóm có thể thu gọn 3</a> </h4> </div > <div id="collapse3" class="panel-collapselapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một lợi ích tối thiểu, quis nostrud ullamco labis nisi ut aliquip ex ea commodo consequat.</div> </div> </div> </div> </div> </body> </html>