Added/updated in: All versionsVersion 1.2.6Version 1.2.1Version 1.2Version 1.1Version 1.0
Options
Options are used to affect behaviour of jAccordion. An option may depend on other options in which case it's mentioned in the description page of the option. Options are placed in configuration section of jAccordion and are separated by comma. You are also allowed to specify options via HTML5 data attributes. Below you can find a summary of all available options with possibility to display detailed explanation and demo(s).
Example of configuration section of jAccordion:
<script type="text/javascript">
// Avoid conflict with other libraries
jQuery(document).ready(function( $ ) {
$('.accordion').jAccordion({
activeSlideSize : 750,
spacing : 3,
sticky : true,
autoplay : true,
autoplayInterval : 5000,
arrowKeysNav : true,
nextBtn : $('.nextBtn'),
prevBtn : $('.prevBtn')
});
});
</script>
Summary
falseSpecifies whether size (width/height) of accordion is automatically adjusted to fit size of content but max size (set via CSS) can't be exceeded unless value of option activeSlideAutoHeight is set to true.
falseSpecifies whether height of the active slide is determined by its content.
'active_slide'Class which is added to active slide so it's possible to change its style via CSS.
falseEnables/disables using of arrow keys to control the active instance of accordion. An instance of accordion can be activated by clicking it (if option event is 'click') or by moving cursor over a slide (if option event is 'mouseenter') so only one instance can be controlled at the moment. If no instance is active it's still possible to use arrow keys to scroll the page. Left and top keys are used to activate the previous slide and the right and bottom ones are used to activate the next slide.
3000Amount of time for which a slide is displayed if using autoplay.
nullIndex of a slide which is active by default. All slides are deactivated if no value is set. Slides are numbered from 0. First slide equals 0, second slide equals 1, etc. Plugin internally uses jQuery method eq so it's possible to set -1 to activate the last slide.
'swing'Easing function used for animation of slides. jQuery library offers only two functions - 'swing' and 'linear' but you can use jQuery easing plugin to add large amount of them. This plugin is included in all provided themes.
'mouseenter'Mouse event which triggers activation of a slide. Allowed values are 'click' and 'mouseenter'. Value 'click' is automatically used for handheld devices.
nullHash let's you easily link to a slide even from a different page. Hash is a combination of prefix and index of slide (slides are numbered from 0). If you set hashPrefix to 'slide' then hash would be #slide0 or #slide1 etc. If you want to link to a slide from a different page then attribute href of a link should look like http://www.example.com/#slide0. Plugin internally uses jQuery method eq so you can use #slide-1 to open the last slide.
nullHTML element which is included in every slide (exactly one header per one slide). Clicking the header activates/deactivates the slide which contains the header.
0Size (width/height) of inactive slide. If set then option activeSlideSize is not applied at all.
trueSpecifies whether height is changed in the same proportion as width when onresize event occurs.
nullClicking the element(s) causes activation of the next slide or the first one if none is active.
trueautoplay is paused when cursor enters accordion's direct children .jAccordion-slidesWrapper.
trueSpecifies whether slides remain hidden until all of the images are fully loaded.
500Duration (in milliseconds) of fade-in transition of accordion after all of the images are fully loaded.
nullClicking the element(s) causes activation of the previous slide or the last one if none is active.
trueSpecifies whether to change accordion dimensions according to its parent.
'fit'Specifies which method of scaling is applied to images with class jAccordion-img.
Methods of scaling
- fitWidth - width of images is adjusted so it's same as width of a slide and height is changed in the same proportion
- fitHeight - height of images is adjsuted so it's same as height of a slide and width is changed in the same proportion
- fit - size of images is adjusted to completely fill the whole slide
falseActive slide remains open until another one is activated.
500Duration (in milliseconds) of transition (opening/closing a slide).
falseSpecifies whether slides are stacked vertically or horizontally.
jAccordion by maniacpc, exclusively for CodeCanyon