Top Awesome jQuery Accordion Plugins

Chào các bạn!

Việc sử dụng accordion cũng không còn gì lạ lẫm với các bạn nữa. Accordion có thể được tích hợp với bootstrap hoặc sử dụng plugin riêng. Thực chất các bạn hoàn toàn có thể tự viết 1 đoạn js ngắn gọn. Tuy nhiên như vậy sẽ mất thêm thời gian style cho đẹp, cho mượt mà hơn. Trong khi đó, hiện tại khá nhiều plugin hỗ trợ, chúng ta chỉ việc lấy và sử dụng. Vì vậy, trong bài viết này, mình sẽ giới thiệu tới các bạn một số plugin Accordion đẹp và khá thú vị.

1. Easy Responsive Tabs to Accordion

Plugin này khá đặc biệt, cho phép tab lồng trong tab.

Plugin này có khá nhiều option cho người dùng lựa chọn

$("#demoTab").easyResponsiveTabs({
    type: 'default', //Types: default, vertical, accordion           
    width: 'auto', //auto or any custom width
    fit: true,   // 100% fits in a container
    closed: false, // Close the panels on start, the options 'accordion' and 'tabs' keep them closed in there respective view types
    activate: function() {},  // Callback function, gets called if tab is switched
    tabidentify: 'tab_identifier_child', // The tab groups identifier *This should be a unique name for each tab group and should not be defined in any styling or css file.
    activetab_bg: '#B5AC5F', // background color for active tabs in this group
    inactive_bg: '#E0D78C', // background color for inactive tabs in this group
    active_border_color: '#9C905C', // border color for active tabs heads in this group
    active_content_border_color: '#9C905C' // border color for active tabs contect in this group so that it matches the tab head border
});

Link tham khảo: https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion https://webthemez.com/demo/easy-responsive-tabs/Index.html#ChildVerticalTab_11|parentHorizontalTab1

2. jQuery Responsive Tabs

Bản chất của plugin là 1 dạng tab. Tuy nhiên vẫn có thể sử dụng nó như 1 accordion.

Cách gọi khá đơn giản

$('#responsiveTabsDemo').responsiveTabs({
    startCollapsed: 'accordion'
});

Link tham khảo:

https://github.com/jellekralt/Responsive-Tabs http://jellekralt.github.io/Responsive-Tabs/#tab-3

3. jQuery Accordion

Plugin này cho phép tạo group accordion, tức là accordion trong accordion

{
    transitionSpeed: 300,
    transitionEasing: 'ease',
    controlElement: '[data-control]',
    contentElement: '[data-content]',
    groupElement: '[data-accordion-group]',
    singleOpen: true
}

Link tham khảo: https://vctrfrnndz.github.io/jquery-accordion/

4. liteAccordion

Đây là 1 accordion nằm ngang thay vì hoạt động vertical như thông thường. Bên cạnh đó, plugin này có layout responsive khi bạn set { responsive : true } trong phần option của plugin. Lúc này, accordion sẽ tự điều chỉnh chiều dài của nó sao cho phù hợp với kích thước của page. Plugin này dễ dàng sử dụng trên mobile hoặc là các thiết bị cầm tay khác khi định hướng của thiết bị thay đổi.

Link tham khảo: https://github.com/nikki/liteAccordion

5. Akordeon

Accordion này được style theo phong cách menu trên website. Ý tưởng đằng sau Akordeon là cung cấp một giao diện nhẹ và có thể tùy chỉnh cho các collapsible panels có thể chứa bất kỳ loại dữ liệu nào trong một không gian hạn chế.

Link demo: https://www.egrappler.com/akordeon/index.htm Link tham khảo: https://www.egrappler.com/trendy-jquery-accordion-plugin-free-akordeon/

6. jQuery Easy Accordion Plugin

Đây cũng là 1 dạng horizontal slider vô cùng linh hoạt.

Link tham khảo: https://www.madeincima.it/en/jquery-plugin-easy-accordion/

7. jQuery Common Accordion

Thêm 1 dạng horizontal accordion cho các bạn lựa chọn

Link tham khảo: http://www.marghoobsuleman.com/jQuery-common-accordion

Như vậy, trogn bài viết này mình đã giới thiệu tới các bạn một số plugin accordions khá thú vị, cũng rất dễ sử dụng. Hi vọng các bạn có thể lựa chọn cho mình plugin thích hợp nhất.