one collapsible for all
https://adityasrivast.github.io/AllCollapsible/demo/example.html
- 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
Just add the link to the files in your <head> tag.
<!--Minified css file-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/adityasrivast/[email protected]/dist/css/allcollapsible.min.css">
<!--Minified js file-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/adityasrivast/[email protected]/dist/js/allcollapsible.min.js"></script>Apart from these don't forget to add cdn for jquery before <script> tag for js file.
<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js"></script><ul class="collapsible">
<li>
<div class="collapsible-title">First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-title">Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet</span></div>
</li>
<li>
<div class="collapsible-title">Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet</span></div>
</li>
</ul><ul class="collapsible extensible">
<li>
<div class="collapsible-title">First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-title">Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet</span></div>
</li>
<li>
<div class="collapsible-title">Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet</span></div>
</li>
</ul><ul class="collapsible with-arrow">
<li>
<div class="collapsible-title">First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-title">Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet</span></div>
</li>
<li>
<div class="collapsible-title">Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet</span></div>
</li>
</ul><ul class="collapsible extensible with-arrow">
<li>
<div class="collapsible-title">First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-title">Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet</span></div>
</li>
<li>
<div class="collapsible-title">Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet</span></div>
</li>
</ul>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.
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:
<ul class="collapsible">
<li>
<div class="collapsible-title teal">First</div>
<div class="collapsible-body teal-lighten-3"><span>Lorem ipsum dolor sit amet</span></div>
</li>
<li>
<div class="collapsible-title red">Second</div>
<div class="collapsible-body red-lighten-2"><span>Lorem ipsum dolor sit amet</span></div>
</li>
<li>
</ul>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.
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.
For any bugs or issue, report at: https://github.com/AdityaSrivast/AllCollapsible/issues
You may also mail at: [email protected]
JQuery 1.4 or higher
MIT License
Copyright (c) 2018 Aditya Srivastava