Làm Accordion chỉ sử dụng CSS

accordion su dung css

Hiệu ứng Accordion là gì?

Accordion là một kỹ thuật giúp bạn rút gọn nội dung mà bạn muốn hiển thị trên website. Nó thường được dùng cho việc hiển thị các menu con. Ngoài ra bạn cũng có thể dùng nó cho nội dung, hình ảnh.

Bình thường để làm accordion thì các bạn thường sử dụng thêm jquery để hiệu ứng mượt mà hơn, nhưng bài này tôi hướng dẫn các bạn chỉ sử dụng CSS để làm accordion cũng đẹp không kém.

Mã HTML của hiệu ứng Accordion

Mã HTML trên gồm 3 cụm thẻ div có cấu trúc giống nhau, và sau này nếu các bạn cần thay đổi nội dung chỉ việc thay đổi theo cấu trúc như trên là được.

Mã CSS Accordion

Mã HTML trên gồm 3 cụm thẻ div có cấu trúc giống nhau, và sau này nếu các bạn cần thay đổi nội dung chỉ việc thay đổi theo cấu trúc như trên là được.

Tiếp theo là phần CSS:

Mã css trên các bạn chỉ cần chú ý tới thuộc tính transition là mới một chút, còn lại đều là các mã mà các bạn đã làm quen rồi. Vậy là xong, hy vọng sẽ giúp ích cho các bạn trong việc thiết kế website sao cho giảm thời gian load trang càng thấp càng tốt, vì dùng quá nhiều jquery cũng là một lý do tại sao website lại chạy chậm

Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com