Foldable

The full stack CSS3 powered jQuery Accordion

Get it now!

API

This is the list of actions you can call with Foldable instances.

If you are using Foldable in jQuery format, methods are called following de jQuery UI pattern $foldable.foldable('methodName' /*, arguments */)

Vanilla Javascript methods are calling like foldable.methodName(/* arguments */)


For example, if you need to open the second group of your accordion when clicking a button, you can do it like this:

// jQuery format
$('#my-foldable').foldable()
$button.on('click', e => {
    e.preventDefault()
    $('#my-foldable').foldable('open', 1)
})

// vanilla JS
const foldable = new Foldable('#my-foldable')
$button.on('click', e => {
    e.preventDefault()
    foldable.open(1)
})

Methods

open

Open an accordion group

How to

// jQuery
$('#my-foldable').foldable('open', group, animation)

// vanilla JS
foldable.open(group, animation)

Parameters

group int || jQuery element || string jQuery element, string CSS selector or group index of the group you want to open
animation boolean Open the group with animation or not

Example

$btns.on('click', e => {
    e.preventDefault()

    // open each group passing the group as jQuery element
    $foldable.foldable('open', $foldable.find('[data-foldable-role="group"]').eq($(e.target).index()))

    // also, you can do the same action passing its index like this
    $foldable.foldable('open', $(e.target).index())
})

close

Close an current active accordion group

How to

// jQuery
$('#my-foldable').foldable('close', group, animation)

// vanilla JS
foldable.close(group, animation)

Parameters

group int || jQuery element || string jQuery element, string CSS selector or group index of the group you want to close
animation boolean Close the group with animation or not

Example

$btns.on('click', e => {
    e.preventDefault()

    // close each group passing the group as jQuery element
    $foldable.foldable('close', $foldable.find('[data-foldable-role="group"]').eq($(e.target).index()))

    // also, you can do the same action passing its index like this
    $foldable.foldable('close', $(e.target).index())
})

toggle

Close an current active accordion group

How to

// jQuery
$('#my-foldable').foldable('toggle', group, animation)

// vanilla JS
foldable.toggle(group, animation)

Parameters

group int || jQuery element || string jQuery element, string CSS selector or group index of the group you want to close
animation boolean Close the group with animation or not

Example

$btns.on('click', e => {
    e.preventDefault()

    // toggle each group passing the group as jQuery element
    $foldable.foldable('toggle', $foldable.find('[data-foldable-role="group"]').eq($(e.target).index()))

    // also, you can do the same action passing its index like this
    $foldable.foldable('toggle', $(e.target).index())
})

expand

Expand all closed groups

How to

// jQuery
$('#my-foldable').foldable('expand', animation)

// vanilla JS
foldable.expand(animation)

Parameters

animation boolean Expand all with animation or not

Example

$btns.on('click', e => {
    e.preventDefault()

    $foldable.foldable('expand')
})

collapse

Close all active groups

How to

// jQuery
$('#my-foldable').foldable('collapse', animation)

// vanilla JS
foldable.collapse(animation)

Parameters

animation boolean Close with animation or not

Example

$btns.on('click', e => {
    e.preventDefault()

    $foldable.foldable('collapse')
})

refresh

Refresh the accordion functionality to check new groups or options

How to

// jQuery
$('#my-foldable').foldable('refresh')

// vanilla JS
foldable.refresh()

Example

$addNewGroupBtn.on('click', e => {
    e.preventDefault()

    const newIndex = $foldable.find('[data-foldable-role="group"]').length + 1;

    $foldable.append(`
        <div class="foldable__group" data-foldable-role="group">
            <button class="foldable__trigger" data-foldable-role="trigger">Group ${newIndex}</button>
            <div class="foldable__target" data-foldable-role="target">
                <article class="foldable__item">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </article>
            </div>
        </div>
    `)
    
    // When mutates the DOM of the accordion you must call refresh method to update functionality
    $foldable.foldable('refresh')
})

updateOptions

Pass a new options object to extend the current options

How to

/*
New options object to be passed.
Options will be updated in the accordion.

For example:
const newOptions = {
    accordion: false,
    ...
}
*/

// jQuery
$('#my-foldable').foldable('updateOptions', newOptions)

// vanilla JS
foldable.updateOptions(newOptions)

Parameters

options object The same default options that brings you Foldable

play

Open each group by intervals

How to

// jQuery
/*
options = {
    interval: 0, // Time in milliseconds to wait to open each group
    stopOnEvent: true // Clear the intervals when an action happens (like toggling the accordion)
}
*/
$('#my-foldable').foldable('play', options)

// vanilla JS
foldable.play(options)

Parameters

options object interval Time in milliseconds to wait to open each group
stopOnEvent Clear the intervals when an action happens (like toggling the accordion)

Example

$playBtn.on('click', e => {
    e.preventDefault()

    $foldable.foldable('play', {
        interval: 1000
    })
})

$stopBtn.on('click', e => {
    e.preventDefault()

    $foldable.foldable('stop')
})

pause

Pause the played intervals. When played again, it will continue from the last active group.

How to

// jQuery
$('#my-foldable').foldable('pause')

// vanilla JS
foldable.pause()

Example

Try the play method example

stop

Clear the played intervals. When played again, it will continue from the first group.

How to

// jQuery
$('#my-foldable').foldable('stop')

// vanilla JS
foldable.stop()

Example

Try the play method example

enable

Restarts the accordion when it has been disabled

How to

// jQuery
$('#my-foldable').foldable('enable')

// vanilla JS
foldable.enable()

Example

$enableBtn.on('click', e => {
    e.preventDefault()
    $foldable.foldable('enable')
})

$disableBtn.on('click', e => {
    e.preventDefault()
    $foldable.foldable('disable')
})

disable

Disables the accordion

How to

// jQuery
$('#my-foldable').foldable('disable')

// vanilla JS
foldable.disable()

Example

Try the enable method example

destroy

Destroys completely Foldable functionality from an accordion

How to

// jQuery
$('#my-foldable').foldable('destroy')

// vanilla JS
foldable.destroy()

Example

let isWorking = true

$toggleDestroyBtn.on('click', e => {
    e.preventDefault()
    
    const $btn = $(e.target)
                
    if(isWorking) {
        $foldable.foldable('destroy')
    } else {
        $foldable.foldable({
            groups    : '.foldable__group',
            triggers  : '.foldable__trigger',
            targets   : '.foldable__target'
        })
    }

    isWorking = !isWorking
})

Properties

You can use Foldable instances to get its properties.

Properties gives you information of the current state of the accordion.

To get the properties you can do it like this:

/* vanilla Javascript */
// create instance
const foldable = new Foldable('#my-foldable')
// access property
console.log(foldable.id)

Instances

Foldable instance will give you access to the properties of Foldable class.
This object of properties stores the global information of the accordion like the current active group instance, all jQuery elements groups, triggers, targets...

To get access to FoldableGroup instances just grab it from a jQuery element from $groups property as in the following example:

// create instance
const foldable = new Foldable('#my-foldable')

// get FoldableGroup instance from the third group
const thirdFoldableGroupInstance = foldable.$groups.eq(2).data('foldable-group-instance')

console.log(thirdFoldableGroupInstance)

Foldable instance

The next list of properties are included in main Foldable instance.

Properties

$el jQuery element Stores the root accordion element
$groups jQuery element Stores the set of groups
$targets jQuery element Stores the set of targets
$triggers jQuery element Stores the set of triggers
all array Stores the collection of all FoldableGroup instances.

FoldableGroup instance

The next list of properties are included in any FoldableGroup instance.

Properties

$el jQuery element Stores the root element of this group
$group jQuery element Stores the group element. It's the container of the trigger and target.
$target jQuery element Stores the target element contained into $group
$trigger jQuery element Stores the trigger element contained into $group
dimension int Stores the current dimension of the group in pixels. According to the orientation it could references to the height or width.
isActive boolean Stores the current state of the group. If the group is open it will be true.
isGrandChild boolean References if the group has children or not. If false, it means that this group has children.
level int Stores the nested level position of the group in the accordion. Very useful property to know when nesting accordions. Zero based.
index int Stores the index position related with it group and siblings. Zero based.
parent FoldableGroup Stores the parent instance of this group.
root Foldable Stores the root instance of the accordion.
siblings array Stores the set of FoldableGroup instances of this group (including itself).
hasTarget boolean References if the group has target or not.
hashFragment string Stores the hash fragment which is referencing to if it had.