Foldable

Foldable is the full stack CSS3 powered jQuery Accordion.

Responsive and device-ready with a lot of options to customize it that can be easily be part of your projects.

Fully animated open-close actions using built-in CSS3 animations with a smart auto fallback to jQuery animations for oldie browsers

Developed thinking in you, whether you are a professional developer or not. It’s completely written in javascript ES6 and exported as UMD (for advanced developers) and also compiled in plain Javascript to use it like a normal jQuery plugin (for standard developers).

Foldable also brings you an extensive documentation to make the most of its API.

Documentation | Examples | Playground | Support

These are a few of the multiple features of Foldable, so let’s continue reading and discover all of them!

FOLDABLE FEATURES

• CSS3 Powered: All the animations and transitions use the efficiency and speed of CSS3.
• jQuery: Driven by jQuery as a dependency. Fallback to jQuery animate for oldie browsers.
• Responsive: Fully tested and adapted to touch devices. Styles ready-to-use to responsive requirements.
• Themes: Foldable brings you 12 built-in themes ready to go. View themes
• Built-in Animations: Foldable brings you 5 built-in animations ready to go. View animations You can easily use your custom animations or use some animation library like animate.css!. Configure its enter & leave animation independently and the duration.
• Transitions: By default, Foldable will use CSS3 transitions to open & close itself. These transitions can be easily configured by its easing and duration. Automatic jQuery fallback will be used instead for oldie browsers (also configurable by its easing and duration). You can force FOldable to use only jQuery animations instead.
• Nesting: Robust recursive logic to allow you to nest accordions into accordions without limits!
• Multiple: Create multiple independent instances on the same page.
• Hash: Update easily the URL hash toggling the accordion. Auto open accordion groups checking URL hash on init.
• Full CSS Control: Foldable comes with a multiple CSS state classes to allow you to control every accordion state. View state classes
• Autoplay: Automatically activate the accordion and let Foldable opens the groups by itself in intervals. Can be stopped on an user action.
• UMD: Exported in Universal Module Definition. You can easily import it in many ways: jQuery plugin, AMD, CommonJS and Browser global (from window)
• Customizable: Fully customizable with a lot of options, themes, animations…
• API: It comes with a lot of methods, events and properties to make it full operative. View API
• Events: Built-in events bindings to listen to every important action. Choose between jQuery events or Vanilla Javascript events. Also, you can use callback methods in the options object.
• Documentation: Foldable is fully documented with explanations, code examples and interactive examples.
• ES6: Completely written in ECMAScript 2015 (ES6) and compiled in Vanilla Javascript.
• Light weight: Compiled and minimized is about only 29kb! Only 8kb gzipped!
• Content: You can set any HTML content inside the accordion. Just put it inside and Foldable will take care of the rest.
• Toggle: Create simple toggles automatically in the same way you create a normal accordion. No more configuration required.
• Links: Prevent some trigger accordion buttons to be part of the accordion and let them to be normal links easily. Very useful if you apply Foldable to some navigation.
• Crossbrowser: Supports for browsers from IE9 to IE Edge (dropped lower for unsupport by Windows), Google Chrome, Firefox, Opera, Safari and mobile browsers (automatically adapted for better performance). Fully tested on iOS, Android and Windows Phone.
• SCSS: Styles created using SASS preprocessor and compiled into CSS

PACKAGE SOURCES

ZIP file contains the following files and folders View more:

• Source, compiled and minified JS
• Source SCSS, compiled and minified CSS
• Documentation with multiple examples and playground View it online too

CREDITS

• jQuery
• Roboto font

CHANGELOG

Version 1.0.0

• Initial release