Foldable

The full stack CSS3 powered jQuery Accordion

Get it now!

Options

Setup

The next section is the list of the default options provided by Foldable.

You must pass the options object when you initialize Foldable as in the example below:

// jQuery
// Pass the options object to the jQuery foldable plugin method
$('#my-foldable').foldable({
    ...options
})

// vanilla Javascript
// Pass the options object to the Foldable class
const foldable = new Foldable('#my-foldable', {
    ...options
})

Initialize in HTML

Also, you can initialize Foldable in HTML, without writing any Javascript.

Add data-foldable attribute to the root element and set the options in it value in JSON format

Sometimes is useful to not assign functionality to a some triggers in an accordion, for example in a navigation menu, where some triggers must be only links and not fire any else action.

To prevent that these triggers get assigned its accordion functionality, you can do it in two ways:

  • Add the data-foldable-link data attribute to the trigger
  • Add the foldable--is-link class name to the trigger

Options

id

Type:string

Default:null

If set, it will add data-foldable-id attribute to the root element of the accordion.

If not set, Foldable will automatically add a unique id to data-foldable-id

Example

// jQuery
$('#my-foldable').foldable({
    id: 'my-id'
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    id: 'my-id'
})

activeClass

Type:string

Default:'active'

Assigning this class to a trigger in your html, it forces to be open the accordion in that group on load

Example

// jQuery
$('#my-foldable').foldable({
    activeClass: 'active'
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    activeClass: 'active'
})

groups

Type:string / jQuery element

Default:'[data-foldable-group]'

(CSS selector / jQuery element) for the container element wrapping the trigger and target of each accordion group

Example

// jQuery
$('#my-foldable').foldable({
    groups: '.my-foldable-group'
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    groups: '.my-foldable-group'
})

triggers

Type:string / jQuery element

Default:'[data-foldable-trigger]'

(CSS selector / jQuery element) for the element inside a group acting as the triggering button

Example

// jQuery
$('#my-foldable').foldable({
    triggers: '.my-foldable-trigger'
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    triggers: '.my-foldable-trigger'
})

targets

Type:string / jQuery element

Default:'[data-foldable-target]'

(CSS selector / jQuery element) for the element inside a group acting as the content of each accordion

Example

// jQuery
$('#my-foldable').foldable({
    targets: '.my-foldable-target'
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    targets: '.my-foldable-target'
})

triggerEvent

Type:string

Default:'click'

Event to toggle the accordion. Could be 'click' or 'hover'

Example

// jQuery
$('#my-foldable').foldable({
    triggerEvent: 'hover'
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    triggerEvent: 'hover'
})

accordion

Type:boolean

Default:true

If true, it will automatically close siblings accordions when open a group.
If false, more than one groups could be opened at the same time.

Example

// jQuery
$('#my-foldable').foldable({
    accordion: false
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    accordion: false
})

transition

Type:Object

Default:{ duration: 300, easing: 'ease' }

Object options to set the toggling transitions

Options

  • duration: int 300 Toggle transition speed in milliseconds
  • easing: int 'ease' Transition CSS easing. Could be 'ease', 'ease-in', 'ease-out' or 'cubic-bezier()'

Example

// jQuery
$('#my-foldable').foldable({
    transition: {
        duration: 300,
        easing: 'ease'
    }
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    transition: {
        duration: 300,
        easing: 'ease'
    }
})

animation

Type:Object

Default:{ enter: null, leave: null, duration: 300 }

Object options to set the toggling animations

Options

  • enter: string / null null

    CSS class referencing the animation to apply to the targets when opening.
    To prevent this animation, set this option to null.
    With this option, you can easily use animations like animate.css brings to you.

    For example, you'll only had to assign'animate slideInUp'in this option to make targets appear with this animation.

    There are some built-in animations that you can use in foldable-animations.css. More info here


  • leave: string / null null

    Same functionality as in animation.enter, but setting the closing animation.

    There are some built-in animations that you can use in foldable-animations.css. More info here


  • duration: int / null null If null, it will use the transitionDuration option.
    If you need a custom speed for the animation, you can assign it here in milliseconds.
    When setting this option, transition.duration will be updated with this value

Example

// jQuery
$('#my-foldable').foldable({
    animation: {
        enter    : 'my-entering-css-animation',
        leave    : 'my-leaving-css-animation',
        duration : 300
    }
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    animation: {
        enter    : 'my-entering-css-animation',
        leave    : 'my-leaving-css-animation',
        duration : 300
    }
})

animationOut

Type:Object

Default:{ duration: 300, easing: 'ease' }

Object options to set the toggling animations

Options

  • class: string / null null

    Same functionality as in animationInClass, but setting the closing animation.
    Built-in animations you can use: 'foldable-anim--scale-out''foldable-anim--slide-out'

  • duration: int / null null Same functionality as in animationIn, but setting the closing animation speed.

Example

// jQuery
$('#my-foldable').foldable({
    animationOut: {
        class: 'my-prepared-css-animation',
        duration: 300
    }
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    animationOut: {
        class: 'my-prepared-css-animation',
        duration: 300
    }
})

autoplay

Type:Object

Default:{ interval: 0, stopOnHover: true }

Object options to trigger the autoplay functionality

Options

  • interval: int 0 Autoplay interval speed in milliseconds.
    If the value is 0 or false or null, autoplay won't initialize.
  • stopOnHover: boolean true If true, autoplay interval will be cleared when an action happens (like toggling the accordion)

Example

// jQuery
$('#my-foldable').foldable({
    autoplay: {
        interval: 500,
        stopOnHover: 'ease'
    }
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    autoplay: {
        interval: 500,
        stopOnHover: 'ease'
    }
})

hash

Type:boolean

Default:false

If true, URL hash functionality will be applied to the accordion.

You'll need to assign to the triggers the hash to apply.

You can choose between setting it in the"href"attribute or in"data-foldable-hash"data attribute.

Example

// jQuery
$('#my-foldable').foldable({
    hash: true
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    hash: true
})

autoCloseChildren

Type:boolean

Default:true

When nesting accordions, set this option to allow to close automatically its active children accordions or leave it open.

Example

// jQuery
$('#my-foldable').foldable({
    autoCloseChildren: false
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    autoCloseChildren: false
})

forceJqueryAnimations

Type:boolean

Default:false

By default use CSS3 transitions & animations. Set this to true to force to use jQuery animations

Example

// jQuery
$('#my-foldable').foldable({
    forceJqueryAnimations: true
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    forceJqueryAnimations: true
})