Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion
Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.
https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion
Last synced: 13 days ago
JSON representation
Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.
- Host: GitHub
- URL: https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion
- Owner: samsono
- License: other
- Created: 2013-05-16T07:08:45.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2016-06-26T00:56:58.000Z (over 8 years ago)
- Last Synced: 2024-08-01T22:54:05.954Z (3 months ago)
- Language: JavaScript
- Size: 449 KB
- Stars: 604
- Watchers: 55
- Forks: 259
- Open Issues: 67
-
Metadata Files:
- Readme: README.md
- License: MIT-license
Awesome Lists containing this project
README
Easy Responsive Tabs to Accordion
=================================
Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its form accordingly.
Features
=========
+ Horizontal / Vertical Tabs to Accordion
+ Tabs and accordion are created entirely with jQuery
+ Supports multiple sets of tabs on same page
+ Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
+ Multi device support (Web, Tablets & Mobile)
+ Link directly to specified tab (works with multiple instances)
+ Maintains state of tabs when navigating away from page and then returning using back or forward (if browser supports the History API)
+ Nested tabs
Demo
====
http://webthemez.com/demo/easy-responsive-tabs/Index.html
How to use
==========
=> Included jQuery file (minimum jQuery-1.5.1.min.js)
=> Included easyResponsiveTabs.js
=> Include responsive-tabs.css
=> Here is the Markup for Tabs structure (non nested tabs):
- ....
- ....
- ....
.......
.......
.......
=> Here is the Markup for Tabs structure (nested tabs):
- ....
- ....
- ....
- ....
- ....
- ....
.......
.......
.......
.......
.......
=> Call the easyResponsiveTabs function:
$('#demoTab').easyResponsiveTabs();
=> With optional parameters:
$("#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
});
=> Linking to Tabs:
http://yoursite.com/tabs.html#{TAB ID}{TAB NUM}
http://yoursite.com/tabs.html#demoTab2
Multiple Instances:
http://yoursite.com/tabs.html#{TAB ID 1}{TAB NUM}|{TAB ID 2}{TAB NUM}
http://yoursite.com/tabs.html#demoTab2|demoTwo3
For any support
===============
Samson
Email: [email protected]