Bộ sưu tập các ví dụ mã accordion HTML và CSS miễn phí. ngang, dọc, đơn giản, đáp ứng nhanh, động, v.v. Cập nhật bộ sưu tập tháng 3 năm 2020. 14 ví dụ mới
Những bài viết liên quan
- Bootstrap Accordions
- Hiệp ước jQuery
- đàn accordion phản ứng
- đàn accordions Tailwind
- HTML & with CSS
Tác giả
- thiết kế lại
- 5 Tháng Ba, 2021
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
CSS Chỉ hoạt hình ngữ nghĩa Accordion
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Håvard Brynjulfsen
- 16 Tháng Hai, 2021
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
đàn phong cầm
Minh họa về những gì bạn có thể làm với các chi tiết và yếu tố tóm tắt
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Jachym Janousek
- Ngày 12 tháng 1 năm 2021
liên kết
- bản demo và mã
- rê bóng
Làm với
- HTML/CSS [SCSS]
Về một mã
Phần tử chi tiết HTML gốc được tạo kiểu qua CSS
Việc triển khai một thành phần giống như đàn accordion chỉ sử dụng phần tử HTML gốc chi tiết/tóm tắt và CSS để tạo kiểu. Kết quả tốt nhất có thể được nhìn thấy trong trình duyệt dựa trên Chrome hoặc Blink. Firefox và những người khác cũng có kết quả tốt, nhưng chúng có thể được cải thiện bằng cách tạo các biểu tượng đóng/mở thay thế
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Ousman Diallo
- 25 Tháng Chín, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
đàn accordion flexbox
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- song phương PF
- Tháng Chín 12, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Phù hợp với CSS và HTML thuần túy
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Cá ngừ
- 3 Tháng Chín, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
đàn phong cầm
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. biểu tượng ion. css
Tác giả
- CodiesLỗi
- 28 Tháng Tám, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Accordion mà không cần sử dụng JavaScript
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- khối Anna
- Tháng Tám 12, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
HTML CSS Accordion không có JavaScript/jQuery
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- mã hóa thú
- 25 Tháng Bảy, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS [SCSS]
Về một mã
Menu Accordion chỉ với HTML & CSS
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. phông chữ tuyệt vời. css
Tác giả
- hai bên. Rizwaan
- 18 Tháng Bảy, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Menu đàn accordion đơn giản với HTML và CSS
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Vynter
- 17 Tháng Bảy, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Menu Accordion Chỉ HTML CSS
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. phông chữ tuyệt vời. css
Tác giả
- rahul kumar raidas
- 28 Tháng Tư, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Hiệp ước CSS HTML thuần túy
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- ZingGrid
- 28 Tháng Mười Hai, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS/JavaScript
Về mã
Nội dung đàn accordion
Air báo giá thẻ chế độ lưới và nội dung đàn accordion
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. không
Phụ thuộc. zinggrid. js
Tác giả
- ryan
- 13 Tháng Mười Hai, 2017
liên kết
- bản demo và mã
Làm với
- HTML/Pug
- CSS/SCSS
- JavaScript/Babel [Vue. js]
Về mã
Đàn accordions Xin vui lòng
Đàn accordion dọc với HTML, CSS và JS [Vue. js]
Tác giả
- Davide Cantelli
- 26 Tháng mười, 2017
liên kết
- bản demo và mã
Làm với
- HTML
- CSS/SCSS
- JavaScript
Về mã
đàn accordion trong js
Accordion trong vanilla JS với chuyển tiếp CSS
Tác giả
- Stelios Baglaridis
- 25 Tháng Tám, 2017
liên kết
- bản demo và mã
Làm với
- HTML
- CSS
- JavaScript
Về mã
đàn accordion 2. 0
Đàn accordion dọc với HTML, CSS và JS
Tác giả
- Lewis Briffa
- 14 Tháng Tám, 2017
liên kết
- bản demo và mã
Làm với
- HTML
- CSS [Ionicons. css]
- JavaScript [jQuery. js]
Về mã
đàn phong cầm
Chức năng của Accordion JS cho phép bạn đặt tốc độ hoạt ảnh của chuyển đổi. Bạn cũng có tùy chọn chỉ có thể mở một mục đàn accordion tại một thời điểm nhất định
Tác giả
- Kiri Egington
- 13 Tháng Bảy, 2017
liên kết
- bản demo và mã
Làm với
- HTML
- CSS/SCSS
- JavaScript [jQuery. js]
Về mã
Đàn accordion có thể truy cập ARIA
Một đàn accordion đơn giản có thể được sử dụng bởi cả người dùng chuột và bàn phím
Tác giả
- Katherine Kato
- 12 Tháng Bảy, 2017
liên kết
- bản demo và mã
Làm với
- HTML/CSS/JavaScript
Về mã
Câu hỏi thường gặp Đàn accordion
Câu hỏi thường gặp tối thiểu về đàn accordion được tạo bằng JavaScript vani nhỏ
Tác giả
- một trang
- 25 Tháng Sáu, 2017
liên kết
- bản demo và mã
Làm với
- HTML
- CSS/SCSS [Hoạt hình. css]
- JavaScript [jQuery. js]
Về mã
đàn accordion cơ bản
Đàn accordion cơ bản trong HTML, CSS và JS
Khái niệm đàn accordion đơn giản
Khái niệm đàn accordion đơn giản HTML, CSS và JavaScript
Thực hiện bởi Kyle Brumm
24 Tháng Ba, 2017
tải xuống bản demo và mã
Funky Pure CSS Accordion
Một mảnh giao diện người dùng CSS thuần túy khác ở đây sử dụng các nút radio cho các trạng thái hoạt động
Thực hiện bởi Jamie Coulter
19 Tháng Ba, 2017
tải xuống bản demo và mã
Mở rộng Accordion theo chiều ngang trong React
Một giải pháp thay thế nhanh chóng cho mẫu 'Accordion' tiêu chuẩn, được xây dựng hoàn toàn bằng React
Thực hiện bởi Sean
7 Tháng Giêng, 2017
tải xuống bản demo và mã
Hiệp định CSS thuần túy
Đàn accordion hình ảnh chỉ với CSS và bộ lọc màu sử dụng chức năng rgba[]
Thực hiện bởi Eduardo Moreno
26 Tháng mười một 2016
tải xuống bản demo và mã
Hiệp định CSS
Một giải pháp đơn giản để tạo đàn accordion CSS thuần túy với chuyển đổi CSS trên chiều cao của bảng điều khiển, đạt được bằng cách đặt "chiều cao tối đa" của bảng đàn accordion thay vì "chiều cao"
Thực hiện bởi Matthew Scott
28 Tháng Mười
tải xuống bản demo và mã
đàn 3D
Đàn accordion đơn giản với hiệu ứng gấp giấy 3D trong HTML, CSS và JavaScript
Thực hiện bởi Pawe Targoski
13 Tháng sáu 2016
tải xuống bản demo và mã
Tác giả
- Shehab Eltawel
- 27 Tháng Năm, 2016
liên kết
- bản demo và mã
Làm với
- HTML
- CSS [Khởi động. js]
- JavaScript [jQuery. js, Khởi động. js]
Về mã
Thiết kế vật liệu Accordion - Bootstrap 3
Bootstrap 3 thu gọn được thiết kế lại để phù hợp với khái niệm Thiết kế Vật liệu với khả năng thêm các biểu tượng khi hiển thị/ẩn với quá trình chuyển đổi suôn sẻ bằng cách thêm một lớp đang hoạt động vào tiêu đề bảng điều khiển khi hiển thị/ẩn
đàn accordion phẳng
Đàn accordion phẳng trong HTML, CSS và JavaScript
Thực hiện bởi Soufiane Abid
12 Tháng Tư, 2016
tải xuống bản demo và mã
HTML thuần túy và CSS Accordion
Đã tạo và thiết kế [trong trình duyệt] một đàn accordion thuần HTML và CSS có thể mở rộng để giải trí
Thực hiện bởi Chris Ota
21 Tháng Giêng, 2016
tải xuống bản demo và mã
Đàn accordion hoạt hình đáp ứng CSS
Đàn accordion hoạt hình đáp ứng HTML và CSS
Thực hiện bởi Chris Wright
19 Tháng Giêng, 2016
tải xuống bản demo và mã
Tác giả
- rau
- 21 Tháng Mười Hai, 2015
liên kết
- bản demo và mã
Làm với
- HTML/CSS [SCSS]
Về một mã
Hiệp định CSS thuần túy
Phiên bản 2. 0. Được thiết kế lại với SCSS và hình ảnh động mượt mà. Đã thêm tab "đóng" trong tùy chọn "mở một" để đóng tab khác. Acordeon được tạo chỉ bằng CSS. Dựa trên thủ thuật checkbox input
+ label
để kích hoạt các tab