Zebra_Accordion is a light-weight, cross-browser and extremely customizable jQuery accordion plugin which is helpful for higher organizing bigger teams of content material.
Options:
- Extremely customizable by way of CSS
- All tabs could also be expanded/collapsed
- Tabs can increase on mouse hover
- Routinely scrolling to suit the scale of the browser’s window
- Accessible by way of ARIA attributes
- Light-weight and straightforward to make use of
Set up:
# NPM $ npm set up zebra_accordion --save # Bower $ bower set up zebra_accordion
You may additionally like:
Fundamental Utilization:
1. Embrace the newest jQuery library and the Zebra_Accordion.js script in your webpage
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/zebra_accordion.min.js"></script>
2. Embrace the Zebra_Accordion’s stylesheet in your webpage
<hyperlink rel="stylesheet" href="/path/to/zebra_accordion.min.css" />
3. Construct the HTML construction to your accordion.
<dl class="Zebra_Accordion" id="demo"> <dt>tab 1</dt> <dd>...</dd> <dt>tab 2</dt> <dd>... </dd> <dt>tab 3</dt> <dd>... </dd> <dt>tab 4</dt> <dd>... </dd> </dl>
4. The instance CSS to model the ordered listing and accordion objects.
dl.Zebra_Accordion { width: 100% }
dl.Zebra_Accordion dt {
background: #000;
colour: #FFF;
daring; padding: 5px
}
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded {
background: #C40000
}
/* the content material */
dl.Zebra_Accordion dd {
background: #EFEFEF;
padding: 15px;
margin: 5px 0
}
.Zebra_Accordion dt:earlier than {
content material: "▶";
margin-right: 10px;
}
.Zebra_Accordion dt.Zebra_Accordion_Expanded:earlier than {
content material: "▼";
margin-right: 10px;
}
5. Initialize the accordion on doc prepared.
$(doc).prepared(operate() {
var myAccordion = new $.Zebra_Accordion('#demo',{
// choices right here
});
});
6. All default configuration choices and callback features.
// Ought to the content material block's opacity be additionally animated?
animate_opacity: true,
// If set to TRUE, an open block can be collapsed on this case, all blocks might be collapsed;
// if set to FALSE, an open block might be collapsed solely by opening one other block - on this case, solely a single block is open at any given second;
collapsible: false,
// The identify of the category to append to the "title" ingredient when its related content material block is expanded.
// Can be utilized for customizing the side of the opened tab to provide higher visible suggestions to the customers.
expanded_class: 'Zebra_Accordion_Expanded',
// The pace (in milliseconds) to make use of when collapsing content material blocks.
hide_speed: 400,
// If a content material block's content material just isn't completely seen after it's expanded, the window might be scrolled so in order that your complete content material of the content material block is seen (whether it is doable).
// This worth represents the pace (in milliseconds) to make use of for scrolling.
scroll_speed: 600,
// The pace (in milliseconds) to make use of when increasing content material blocks.
show_speed: 400,
// The index (0 primarily based) of the content material block to be expanded by default.
// The worth of this property can be boolean FALSE, indicating that each one tabs needs to be collapsed by default.
// If the worth of the "collapsible" property is TRUE, the worth of this property can be boolean TRUE, indicating that each one tabs needs to be expanded by default, or an array with the indexes of tabs to be expanded by default.
present: 0,
// Set this to TRUE if content material blocks needs to be expanded when hovering their related "titles".
// If "collapsible" is TRUE then this property will all the time be FALSE!
toggle_on_mouseover: false,
// Occasion fired earlier than a content material block is collapsed.
// The callback operate (if any) receives as arguments the closed merchandise's quantity (0 primarily based), the title ingredient and the content material block ingredient.
onBeforeClose: null,
// Occasion fired earlier than a content material block is expanded.
// The callback operate (if any) receives as arguments the closed merchandise's quantity (0 primarily based), the title ingredient and the content material block ingredient.
onBeforeOpen: null,
// Occasion fired after a content material block is collapsed.
// The callback operate (if any) receives as arguments the closed merchandise's quantity (0 primarily based), the title ingredient and the content material block ingredient.
onClose: null,
// Occasion fired after a content material block is expanded.
// The callback operate (if any) receives as arguments the opened merchandise's quantity (0 primarily based), the title ingredient and the content material block ingredient.
onOpen: null
7. Embrace the newest jQuery library and the Zebra_Accordion.js script in your webpage
// present a particular accordion merchandise // present(index, [noFx = FALSE], [noScroll = FALSE]) myAccordion.present(1); // Merchandise 2 // cover a particular accordion merchandise // cover(index, [noFx = FALSE]) myAccordion.cover(1); // Merchandise 2
Changelog:
v1.3.0 (2024-11-05)
- added ARIA attributes for collapsed/expanded state to enhance accessibility
- substantial efficiency enchancment through the use of occasion delegation
- minor code refactoring and swapping out some jQuery code with native ES6 equal
v1.2.11 (2024-05-07)
- minor upkeep launch
v1.2.10 (2024-05-02)
- minor upkeep launch
v1.2.9 (2018-08-06)
- Minor supply code updates
v1.2.8 (2018-07-13)
v1.2.8 (2017-10-14)
- mounted a bug the place clicking on an already opened tab when the collapsible property is about to false would set off the onBeforeClose occasion.
- collapsible property can now even be 0 which works the identical as when set to FALSE besides that each one tabs might be collapsed.
v1.2.7 (2017-09-16)
- efficiency enhancements and supply code tweaks
- new folder construction
v1.2.2 (2013-11-29)
- added 2 new occasions – onBeforeClose and onBeforeOpen
This superior jQuery plugin is developed by stefangabos. For extra Superior Usages, please test the demo web page or go to the official web site.
