Foldable is the complete stack CSS3 powered jQuery Accordion.
Responsive and device-ready with a number of choices to customise it that may be simply be a part of your tasks.
Absolutely animated open-close actions utilizing built-in CSS3 animations with a wise auto fallback to jQuery animations for oldie browsers
Developed considering in you, whether or not you’re a skilled developer or not. It’s fully written in javascript ES6 and exported as UMD (for superior builders) and in addition compiled in plain Javascript to make use of it like a traditional jQuery plugin (for normal builders).
Foldable additionally brings you an in depth documentation to profit from its API.
Documentation | Examples | Playground | Support
These are just a few of the a number of options of Foldable, so let’s proceed studying and uncover all of them!
FOLDABLE FEATURES
- CSS3 Powered: All of the animations and transitions use the effectivity and velocity of CSS3.
- jQuery: Pushed by jQuery as a dependency. Fallback to jQuery animate for oldie browsers.
- Responsive: Absolutely examined and tailored to the touch gadgets. Kinds ready-to-use to responsive necessities.
- Themes: Foldable brings you 12 built-in themes able to go. View themes
- Constructed-in Animations: Foldable brings you 5 built-in animations able to go. View animations
You’ll be able to simply use your customized animations or use some animation library like animate.css!.
Configure its enter & go away animation independently and the length. - Transitions: By default, Foldable will use CSS3 transitions to open & shut itself. These transitions will be simply configured by its easing and length. Automated jQuery fallback shall be used as a substitute for oldie browsers (additionally configurable by its easing and length). You’ll be able to drive FOldable to make use of solely jQuery animations as a substitute.
- Nesting: Strong recursive logic to mean you can nest accordions into accordions with out limits!
- A number of: Create a number of unbiased situations on the identical web page.
- Hash: Replace simply the URL hash toggling the accordion. Auto open accordion teams checking URL hash on init.
- Full CSS Management: Foldable comes with a a number of CSS state courses to mean you can management each accordion state. View state classes
- Autoplay: Robotically activate the accordion and let Foldable opens the teams by itself in intervals. Could be stopped on an consumer motion.
- UMD: Exported in Common Module Definition. You’ll be able to simply import it in some ways: jQuery plugin, AMD, CommonJS and Browser international (from window)
- Customizable: Absolutely customizable with a number of choices, themes, animations…
- API: It comes with a number of strategies, occasions and properties to make it full operative. View API
- Occasions: Constructed-in occasions bindings to hear to each vital motion. Select between jQuery occasions or Vanilla Javascript occasions. Additionally, you need to use callback strategies within the choices object.
- Documentation: Foldable is totally documented with explanations, code examples and interactive examples.
- ES6: Utterly written in ECMAScript 2015 (ES6) and compiled in Vanilla Javascript.
- Mild weight: Compiled and minimized is about solely 29kb! Solely 8kb gzipped!
- Content material: You’ll be able to set any HTML content material contained in the accordion. Simply put it inside and Foldable will deal with the remainder.
- Toggle: Create easy toggles routinely in the identical manner you create a traditional accordion. No extra configuration required.
- Hyperlinks: Stop some set off accordion buttons to be a part of the accordion and allow them to to be regular hyperlinks simply. Very helpful for those who apply Foldable to some navigation.
- Crossbrowser: Helps for browsers from IE9 to IE Edge (dropped decrease for unsupport by Home windows), Google Chrome, Firefox, Opera, Safari and cell browsers (routinely tailored for higher efficiency). Absolutely examined on iOS, Android and Home windows Telephone.
- SCSS: Kinds created utilizing SASS preprocessor and compiled into CSS
PACKAGE SOURCES
ZIP file accommodates the next information and folders View more:
- Supply, compiled and minified JS
- Supply SCSS, compiled and minified CSS
- Documentation with a number of examples and playground View it online too
CREDITS
CHANGELOG
Model 1.0.0
- Preliminary launch
