Foldable

The full stack CSS3 powered jQuery Accordion

Get it now!

Customize

Basic styles

Foldable has some basic required styles to make it work correctly, which you must always load.

As explained at Start section, you must load"foldable.min.css"inside the <head>tag.

Themes

Foldable comes with a built-in set of styling themes ready-to-use in your projects.

These are the built-in themes key names:

  • default
  • light
  • dark
  • pink
  • red
  • purple
  • dark-blue
  • blue
  • blue-aqua
  • green
  • yellow
  • orange

The way to assign a theme to your accordion is very straight-forward.
Just use the optiontheme: "/*theme key name*/"to set the theme and the accordion will be automatically updated with that look&feel.


When Foldable knows which theme to use, it will add the class"foldable-theme--/*theme key name*/" to the root element of the accordion.

For example, if you settheme: "red"in the options object, Foldable will add "foldable-theme--red" class.

With this in mind, you can easily modify and create your own themes.

If, for example, you would want to create a brown theme, you should only repeat the previous process changing"red"to"brown". And finally in your styles, use generated"foldable-theme--brown"class as your css style start point to assign styles to the accordion.

Animations

Foldable also comes with multiple CSS animations ready-to-use in your accordions.

Below you'll find the list of the CSS classes that you can use:

  • foldable-anim--scale-in
  • foldable-anim--scale-out
  • foldable-anim--shrink-in
  • foldable-anim--shrink-out
  • foldable-anim--slide-in
  • foldable-anim--slide-out
  • foldable-anim--fold-in
  • foldable-anim--fold-out
  • foldable-anim--fade-in
  • foldable-anim--fade-out

To assign an animation just tell it to Foldable when you pass to it the options object.

You can set animation option to assign the animation of a group.

Inside of this option you can set enter option to assign opening animation, leave for closing animation and duration for the time will take to performs the animation.

Example

// jQuery
$('#my-foldable').foldable({
    animation: {
        enter: 'foldable-anim--scale-in',
        leave: 'foldable-anim--scale-out',
        duration: 300
    }
})

// vanilla Javascript
const foldable = new Foldable('#my-foldable', {
    animation: {
        enter: 'foldable-anim--scale-in',
        leave: 'foldable-anim--scale-out',
        duration: 300
    }
})

To know more in detail about these options, please check the options section

Classes

When a Foldable accordion is created, a set of helpers and state classes are added to the elements reporting the state and processes are happening.

These classes will be very useful to manage your styles depending on states and, also, you can use them in your custom scripts.

Check out the list of classes below:

General classes (added to the root element)

"foldable--is-initialized" Indicates that the accordion has been initialized
"foldable--is-css-modern" Indicates that the browser supports modern CSS features like transitions and animations
"foldable--is-css-legacy" Indicates that the browser doesn't support modern CSS features
"foldable--theme-/*theme key name*/" Indicates that the accordion is using this theme
"foldable--is-disabled" Indicates that the accordion is disabled

Groups classes (added to each group)

"foldable--level-/*level int*/" Indicates the nesting level of this group
"foldable--has-target" Indicates that this group has a target within as an immediate child
"foldable--has-children" Indicates that this group has children within
"foldable--is-first" Indicates that this group is the first of its level
"foldable--is-last" Indicates that this group is the last of its level
"foldable--is-grandchild" Indicates that this is the last nested group
"foldable--is-animating" Indicates that this group is currently animating.
When the animation stops, this class will be removed.
"foldable--is-active" Indicates that this group is currently active
"foldable--is-opening" Indicates that this group is currently opening through the height or width transition
"foldable--is-closing" Indicates that this group is currently closing through the height or width transition
"foldable--is-opened" Indicates that this group has just be opened and the transition has just stopped
"foldable--is-closed" Indicates that this group has just be closed and the transition has just stopped

Triggers and targets classes

"foldable--is-active" Indicates that this group is currently active.
This class is added to its trigger and target too.