Chào các bạn, mình là Bình, một kỹ sư phần mềm với kinh nghiệm làm việc trong lĩnh vực Frontend. Trong thời gian qua, mình thường chỉ làm việc với các dashboard mà ít có cơ hội phát triển các trang web chính như Home hay Landing Page. Gần đây, mình lại có cơ hội làm việc với nhiều dự án yêu cầu thiết kế trang chính cần phải hoạt động hiệu quả mà không cần JavaScript, điều này tạo ra thách thức lớn khi các thành phần như dropdown menu, accordion và carousel đều yêu cầu JavaScript để hoạt động. Tuy nhiên, mình muốn tối ưu hóa việc sử dụng công nghệ, vì vậy trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo một Accordion chỉ với HTML và CSS, tận dụng thêm một chút tính năng của React trong Next.js. # Tại sao Accordion thường cần JavaScript? Accordion về cơ bản là một thành phần có trạng thái (state), nghĩa là nó yêu cầu khả năng lưu trạng thái mở và đóng. Mặc dù HTML và CSS là rất hữu ích, nhưng chúng không phải là ngôn ngữ lập trình, do đó chúng không thể lưu trạng thái. Thông thường, đây là lý do mà chúng ta phải dùng JavaScript để xử lý các thành phần này. # Giải pháp thay thế cho trạng thái mà không cần JavaScript Trước khi JavaScript trở nên phổ biến, chúng ta vẫn có thể nhập dữ liệu lên trang web thông qua các thẻ input, mà thực tế chính là cách lưu trữ trạng thái. Ví dụ: * ``: Có thể lưu trữ trạng thái boolean (true hoặc false). * ``: Cho phép lựa chọn trong một nhóm (enum). * Các thẻ input khác như number, text cũng giúp lưu trữ trạng thái số và chữ. Như vậy, chúng ta hoàn toàn có thể tạo ra một accordion chỉ bằng một thẻ input checkbox. # Cấu tạo của Accordion Accordion bao gồm hai phần: phần tiêu đề (heading) và phần nội dung (body). Tiêu đề sẽ chứa thông tin tóm tắt và nội dung là phần chi tiết mà người dùng có thể mở hoặc đóng. # Cách cài đặt Accordion Để tạo Accordion, chúng ta sẽ sử dụng một thẻ label, trong đó trỏ tới input checkbox, ẩn input đi để người dùng không thấy. Dưới đây là cách làm: ```html {heading} ``` Phần nội dung của accordion sẽ được đặt trong một thẻ div liền kề với thẻ label, với chiều cao mặc định là 0 và overflow ẩn để ẩn đi: ```html

{body}

``` Toàn bộ mã HTML sẽ được bọc trong một thẻ div để dễ dàng tạo thành một component tái sử dụng: ```html

{heading}

{body}

``` Để bắt trạng thái của input, chúng ta sẽ sử dụng pseudo class `:has` và `:checked` của CSS: ```html

{heading}

{body}

``` **Diễn giải**: Nếu phần tử cha của nội dung chứa một element có `name` là `switch` và có trạng thái `checked`, chúng ta sẽ áp dụng class `h-auto` để hiển thị. Tuy nhiên, khi sử dụng `height`, mà không có chiều cao sẽ không thể animate từ trạng thái không có chiều cao (`height: 0`) sang chiều cao tự động (`height: auto`). Do đó, thay vì sử dụng `height`, chúng ta sẽ dùng `max-height`: ```html

{heading}

{body}

``` Tuy nhiên, để có thể thực hiện animation, `max-height` cần được chỉ định một giá trị cụ thể. Chúng ta có thể tùy chỉnh các class của body và heading để linh hoạt hơn: ```javascript import clsx from "clsx"; import { ReactNode, useId } from "react"; interface IProps { rootCls?: string; heading: string | ReactNode; headingCls?: string; body: string | ReactNode | ReactNode[]; bodyCls?: string; } export function Accordion({ rootCls, heading, headingCls, body, bodyCls, }: IProps) { const id = useId(); const inputId = `accordions.${id}`; return (

{heading}

&]:max-h-max", bodyCls, )} > {body}

); } ``` Tuy nhiên, nếu điều kiện như hiện tại, khi component khác gọi đến Accordion sẽ cần phải xác định cả `max-height` kèm theo selector dài. Vì vậy, ta sẽ đảo điều kiện bằng pseudo class `:not`: ```html

&]:max-h-0", bodyCls, )} > {body}

``` Cuối cùng, Accordion sẽ được sử dụng trong một component khác như sau: ```javascript import { Accordion } from "@/components/Accordion"; export default function Home() { return (

); } ``` Cuối cùng, với việc thực hiện như trên, Accordion của chúng ta đã hoàn tất và có thể hoạt động mà không cần JavaScript, đồng thời rất tối ưu cho SEO. # Kết luận Hy vọng bài viết này đã giúp các bạn hiểu rõ hơn về cách tạo Accordion chỉ với HTML và CSS. Nếu bài viết nhận được sự quan tâm, mình sẽ tiếp tục chia sẻ thêm những dự án như dropdown menu và carousel. source: viblo

Bài viết về chủ đềpure css

Tổng hợp các bài viết về pure css

Tạo Accordion bằng HTML, CSS và JavaScript: Hướng dẫn Chi tiếtHTMLNextjspure css

Chủ đề phổ biến

Tạo Accordion bằng HTML, CSS và JavaScript: Hướng dẫn Chi tiết