AllCollapsible
one collapsible for all
DEMO:
https://adityasrivast.github.io/AllCollapsible/demo/example.html
QUICKSTART:
- Download the latest release of AllCollapsible directly from GitHub.
- Clone the repo:
git clone https://github.com/AdityaSrivast/AllCollapsible.git
- Include the files via jsDelivr.
- Install with npm:
npm install allcollapsible
CDN:
Just add the link to the files in your <head>
tag.
<!--Minified css file--> <!--Minified js file-->
Apart from these don't forget to add cdn for jquery before <script>
tag for js file.
USAGE:
Default
First Lorem ipsum dolor sit amet. Second Lorem ipsum dolor sit amet Third Lorem ipsum dolor sit amet
Extensible
First Lorem ipsum dolor sit amet. Second Lorem ipsum dolor sit amet Third Lorem ipsum dolor sit amet
Collapsible With Arrows
Default
First Lorem ipsum dolor sit amet. Second Lorem ipsum dolor sit amet Third Lorem ipsum dolor sit amet
Extensible
First Lorem ipsum dolor sit amet. Second Lorem ipsum dolor sit amet Third Lorem ipsum dolor sit amet
Similar format is to be followed for classes: with-plus
,with-vertical-bar
,with-star
,with-pencil
,with-bullets
,with-pointer
,with-caret
,with-right-caret
.
For Demo of these classes, click here.
Coloured Collapsible
You can even beautify the title and body for the collapsible by adding colours to it. The only thing you have to do is add a class to <div class="collapsible-title">
and(or) <div class="collapsible-body">
. There are total 178 shades available as of now.
For Example:
First Lorem ipsum dolor sit amet Second Lorem ipsum dolor sit amet
The colours available are: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, available in 10 shades of each, viz., base-color, color-lighten-1, color-lighten-2, color-lighten-3, color-lighten-4, color-lighten-5, color-accent-1, color-accent-2, color-accent-3, color-accent-4. In addition, colours, brown, grey, blue-grey are also available, with 6 six shades each, viz., base-color, color-lighten-1, color-lighten-2, color-lighten-3, color-lighten-4, color-lighten-5.
Special Effects
In addition to these, special effects for hover on collapsible title
can be used.
For hover, two effects can be used: fade-in and fade-out. Correspondingly, two classes, fadein-effect
and(or) fadeout-effect
need to be added to <ul>
tag.
BUGS
For any bugs or issue, report at: https://github.com/AdityaSrivast/AllCollapsible/issues
You may also mail at: adityasrivast@acm.org
DEPENDENCIES
JQuery 1.4 or higher
LICENSE
MIT License
Copyright (c) 2018 Aditya Srivastava