Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Accordion Là Gì Và 10 Ví Dụ Accordion Trong Thiết Kế Web

Accordion Là Gì Và 10 Ví Dụ Accordion Trong Thiết Kế Web


Ngày 16 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay chúng ta sẽ đi tìm hiểu các accordion bằng cách kết hợp HTML, CSS, Javascript và Bootstrap . Nào hãy cũng mình tìm hiểu nhé!

Accordion Là Gì?

Accordion là một danh sách được sắp xếp theo chiều dọc hay chiều ngang có chức năng để hiển thị hay ẩn nội dung. Nếu bạn muốn xem lại thì có thể tham khảo ở đây nhé Accordion. Nó giúp chúng ta có thể tiết kiệm diện tích trang và hiển thị những thông tin chính, khi người dùng muốn xem có thể nhấn vào để hiện nội dung của thông tin đó mà không cần phải điều hướng trang nhiều lần. Nó thường được sử dụng trong trang FAQ, Danh sách nhiều thành phần con hay bảng dữ liệu...

Để hiểu rõ hơn bạn xem ví dụ về trang FAQ của Microsoft dưới đây nha:

Ví dụ về accordion trong trang Microsoft FAQ

Sau đây mình sẽ giới thiệu một số component Accordion được thiết kế sẵn bằng HTML, CSS, Bootstrap và Javascript giúp bạn có thể đa dạng lựa chọn phù hợp với bố cục cũng như thiết kế của trang web.

Trong phần này chúng ta sẽ đi vào tìm hiểu các ví dụ về accordion trong thiết kế và phát triển web nha! Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Cách Thiết Kế Accordion Jquery

Cách Thiết Kế Accordion Jquery

Đây là đoạn code và khi hiển thị trên web của accordion jquery này nhé:

See the Pen FAQ by Katherine Kato (@kathykato) on CodePen.

Nguồn

Cách Thiết Kế CSS Responsive Accordion

Cách Thiết Kế CSS Responsive Accordion

Đây là đoạn code và khi hiển thị trên web của CSS Responsive Accordion này nhé:

See the Pen CSS Responsive animated Accordion by Chris Wright (@chriswrightdesign) on CodePen.

Nguồn

Cách Tạo Accordion Bằng HTML5 CSS3

Đây là đoạn code và khi hiển thị trên web của Accordion Bằng HTML5 CSS3 này nhé:

See the Pen Pure CSS Accordion by Raúl Barrera (@raubaca) on CodePen.

Nguồn

Cách Tạo Javascript Accordion:

Cách Tạo Javascript Accordion

Đây là đoạn code và khi hiển thị trên web của Javascript Accordion này nhé:

See the Pen Responsive Animated SCSS Accordion by MrPirrera (@pirrera) on CodePen.

Nguồn

Cách Tạo Accordion Menu CSS

Accordion xây dựng bằng HTML, CSS và Javascript Phần 5

Đây là đoạn code và khi hiển thị trên web của Accordion Menu CSS này nhé:

See the Pen Responsive Accordion (Background Images) by Michael Ferry (@ferry) on CodePen.

Nguồn

Cách Thiết Kế Collapsing Accordion CSS:

Accordion xây dựng bằng HTML, CSS Phần 6

Đây là đoạn code và khi hiển thị trên web của Collapsing Accordion CSS này nhé:

See the Pen Collapsing Accordion Pure CSS by Kniw Studio (@JeremyWink) on CodePen.

Nguồn

Cách Tạo Accordion Bootstrap:

Cách Tạo Accordion Bootstrap

See the Pen Material design Accordion - Bootstrap v3 by Shehab Eltawel (@shehab-eltawel) on CodePen.

Nguồn

Cách Tạo Jquery UI Accordion:

Accordion xây dựng bằng HTML, CSS Phần 8

Đây là đoạn code và khi hiển thị trên web của Jquery UI Accordion này nhé:

See the Pen Accordion by Lewis Briffa (@LewisBriffa) on CodePen.

Nguồn

Cách Tạo Flat UI CSS Accordion:

Accordion xây dựng bằng HTML, CSS Phần 9

Đây là đoạn code và khi hiển thị trên web của Flat UI CSS Accordion này nhé:

See the Pen Simple Flat UI CSS Accordion by Virlyz ID (@samsurysites) on CodePen.

Nguồn

Cách Tạo HTML CSS Accordion:

Cách Tạo HTML CSS Accordion

Đây là đoạn code và khi hiển thị trên web của Accordion này nhé:

See the Pen Pure HTML+CSS Accordion (Without Javascript) by Dandi Wiratsangka (@dandiws) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc thiết kế giao diện Accordion cho trang web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!