Bài 5: Cách sử dụng Accordion trong Bootstrap

Bài 5: Cách sử dụng Accordion trong  Bootstrap

Accordion trong Bootstrap là tính năng tạo mở rộng thu gọn, ví dụ như bạn muốn làm một list câu hỏi và câu trả lời được thu gọn bên trong.

Ở bài trước chúng ta đã được tìm hiểu về các thành phần trong Form sử dụng Bootstrap, hôm nay chúng ta sẽ tiếp tục tìm hiểu về các Components.

Accordion trong Bootstrap là gì?

Accordion trong Bootstrap là tính năng thu gọn khi bạn click vào dòng chữ hay một nút sẽ hiển thị ra hoặc ẩn đi nội dung đó.

Bạn có thể sử dụng nó để thực hiện các câu hỏi có sẵn lời giải đáp, hiện nay các trang web thường hay có phần nội dung này để giải thích, hoặc trả lời thắc mắc.

Hãy cùng tìm hiểu qua các ví dụ nhé.

Ví dụ về Accordion

Tạo câu hỏi và câu trả lời bằng Accordion trong Bootstrap

Thông thường khi lướt web bạn có thể sẽ thấy phần “Các câu hỏi thường gặp” đúng không ạ, ở ví dụ này mình sẽ thử làm bằng Accordion Bootstrap xem sao nhé:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="accordion accordion-flush" id="accordionFlushExample">
	<div class="accordion-item">
	<h2 class="accordion-header">
	  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
	   Blog sonnguyenaz.com chia sẻ những gì?
	  </button>
	</h2>
	<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
	  <div class="accordion-body">Chia sẻ các kiến thức về IT, Lập trình, tin học văn phòng</div>
	</div>
	</div>
	<div class="accordion-item">
	<h2 class="accordion-header">
	  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
		Có gì thú vị?
	  </button>
	</h2>
	<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
	  <div class="accordion-body">Luôn luôn tìm cách chia sẻ những gì mới nhất, và truyền tải một cách dễ hiểu, dễ thực hiện thông qua các ví dụ cụ thể.</div>
	</div>
	</div>
	<div class="accordion-item">
	<h2 class="accordion-header">
	  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
		Đánh giá của người xem như thế nào?
	  </button>
	</h2>
	<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
	  <div class="accordion-body">Luôn luôn đánh giá tích cực, tiếp thu ý kiến của bạn đọc để góp phần mang lại giá trị tốt nhất cho người xem</div>
	</div>
	</div>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

Khi bạn bấm vào các câu hỏi thì ngay lập tức sẽ xổ ra câu trả lời phía dưới.

Chọn hiển thị mặc định

Bạn có thể thêm class show vào phần nội dung câu trả lời, nếu để mặc định thì câu trả lời sẽ ẩn đi.

<div id="flush-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Chia sẻ các kiến thức về IT, Lập trình, tin học văn phòng</div>
</div>

Kết quả thu được

Bạn muốn hiển thi nội dung ở accordion nào thì thêm class vào phần đó, nội dung sẽ được hiển thị ra như trên.

Cố định hiển thị câu trả lời

Nếu như ở trên bạn bấm vào câu hỏi khác thì ngay lập tức hiển thị mặc định sẽ bị mất đi.

Giờ bạn muốn luôn luôn hiển thị câu trả lời cho dù bấm vào câu hỏi nào đi nữa.

Để làm được như vậy bạn chỉ cần bỏ đi thuộc tính data-bs-parent ở mỗi nội dung trả lời:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="accordion accordion-flush" id="accordionFlushExample">
	<div class="accordion-item">
	<h2 class="accordion-header">
	  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="true" aria-controls="flush-collapseOne">
	   Blog sonnguyenaz.com chia sẻ những gì?
	  </button>
	</h2>
	<div id="flush-collapseOne" class="accordion-collapse collapse show">
	  <div class="accordion-body">Chia sẻ các kiến thức về IT, Lập trình, tin học văn phòng</div>
	</div>
	</div>
	<div class="accordion-item">
	<h2 class="accordion-header">
	  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
		Có gì thú vị?
	  </button>
	</h2>
	<div id="flush-collapseTwo" class="accordion-collapse collapse">
	  <div class="accordion-body">Luôn luôn tìm cách chia sẻ những gì mới nhất, và truyền tải một cách dễ hiểu, dễ thực hiện thông qua các ví dụ cụ thể.</div>
	</div>
	</div>
	<div class="accordion-item">
	<h2 class="accordion-header">
	  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
		Đánh giá của người xem như thế nào?
	  </button>
	</h2>
	<div id="flush-collapseThree" class="accordion-collapse collapse" >
	  <div class="accordion-body">Luôn luôn đánh giá tích cực, tiếp thu ý kiến của bạn đọc để góp phần mang lại giá trị tốt nhất cho người xem</div>
	</div>
	</div>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

Lời kết

Như vậy qua các ví dụ cụ thể mình đã hướng dẫn các bạn sử dụng Accordion trong Bootstrap để làm mục câu hỏi thường gặp trên website.

Nó cũng có thể ứng dụng thực tế để làm các thứ khác nữa, tùy vào yêu cầu của khách hàng. Chúc các bạn thành công.

Bài viết cùng chủ đề

Cảm ơn đã theo dõi bài viết.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *