Foldable

The full stack CSS3 powered jQuery Accordion

Get it now!

Let's get started!

Extract & Place

First of all, download the plugin zip file from Codecanyon and follow the following steps:

  1. Extract the files from the zip.

    You will find inside the zip the following structure:

    Foldable/
    ├── dist/
    │   ├── fonts
    │   ├── css
    │   │	└── foldable.css
    │   │	└── foldable.min.css
    │   │	└── foldable-themes.css
    │   │	└── foldable-themes.min.css
    │   │	└── foldable-animations.css
    │   │	└── foldable-animations.min.css
    │   └── js
    │   	└── foldable.js
    │   	└── foldable.min.js
    │
    ├── src/
    │   ├── assets
    │   │	└── icons
    │   ├── scss
    │   └── js
    │
    └── documentation/
    
    

    As you can see, important files that you will use are inside of dist folder.

    We also include both src and documentation folders:

    • src Foldable source code. We have used SCSS to generate the styles. About scripts, we have developed the plugin using the modern Javascript syntax ES6 and transpiling a compilating with Webpack. Know more about source
    • documentation Foldable offline documentation. You can navigate locally through all documentation if you are not connected to the Internet. Know more about documentation
  2. Place foldable.min.css in your/cssproject folder.

  3. Place foldable.min.js in your/jsproject folder.

    You have to always load jQuery library before foldable.min.js.

Install

Dependencies

  • First include foldable.min.css css file inside <head> tag
  • Then include jquery js library right before the closing </body>
  • And finally include foldable.min.js js file right after jquery script tag

If you want to use built-in themes, you will need to place /fonts at the root of your project.
This is a must to let foldable.css to find out these font files.

These font files contains the arrow of the triggers

Usage

  • Be sure you call the plugin right after the document is ready.
  • Use the plugin as Vanilla Javascript or as a jQuery plugin
  • Assign groups, triggers and targets in the options object
    • Firstly, Foldable will search the groups as its immediate children.
      It's very important to note that the group must be an immediate child of the root or (when nesting) the target.
    • Inside of the group you can position both trigger & target wherever you want and it will be found
    • You can assign them as string CSS selector or jQuery element
  • To know more check the examples and the API

Activating

Basic HTML code

This is the default HTML code you must insert into you HTML structure within <body></body>tags.

If you use this HTML structure, Foldable will be activated automatically.

You can use any HTML markup to make the accordion but be sure you respect the minimum requeriments:

  • Every section inside the accordion must be a group
  • Triggers and targets have to be immediate children of its group.

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

Take a look to the options.

Javascript

Of course, you can initialize the accordion using jQuery or vanilla Javascript.

The implementation is very straight-forward, just assign a selector to your root accordion element and pass (optionally) the options as an object to the plugin. Just the traditional way to use a plugin.

Don't forget to always call the plugin when de DOM is ready to use! $(document).ready()

You can use any HTML markup to make the accordion but be sure you respect the minimum requeriments:

  • Every section inside the accordion must be a group
  • Triggers and targets have to be immediate children of its group.

Documentation

We have includeddocumentation/folder, where you will find all required files to display the documentation offline (locally).

This could be very useful to you if you are disconnected of the Internet and need to use it.

Just grab this folder and paste it wherever you want and access to it through the URL from your browser.
For better performance use it in Google Chrome ;)

Source

Finally, you will find thesrc/folder.

In this folder there are the plugin source files:

  • assets

    Contains used svg icons in themes. When deploying the plugin, they will be transformed into a font.
    you'll find them withindist/fonts/folder. Also, we included theassets/folder indist/assets/

  • scss

    Contains all SCSS files used to create the basic plugin styles, themes and animations.
    They are compiled into css files and you'll find them withindist/css/folder

  • js

    Contains all javascript files to create the plugin functionality.
    All js code are written using ECMAScript 2015 (commonly called ES6). This is the modern and consolidated way to code Javascript.
    They are compiled into normal Javascript files and you'll find them withindist/js/folder