AllCollapsible: One Collapsible for All

I recently released my first package on GitHub, AllCollapsible :)
AllCollapsible gives a variety of Collapsible Menu options to the developers for designing a web page or application.

Collapsible Menus are very effective way of representing information on a web page. They consume very less space and can deliver lots of information. Also, they appear very good, offering a great experience to the end user and hence, the developer.

Being a developer, it is important to be able to deliver the best in least time and with great impact. The better technologies we use and the better results we give in less time, matters a lot.
AllCollapsible as a package ensures the same. It reduces the time for development and at the same time provide with lots of good features for a developer.
Using AllCollapsible, you only need to add a class to your html element and rest everything is taken care by the plugin itself. Let us see how it works!!!

Default Collapsible Menu

In first release, there are 4 types of collapsible menus available, named with subsequently different classes, viz., collapsible, collapsible extensible, collapsible with-arrow, collapsible extensible with-arrow.

All that we need to do is add a class to the <ul> tag.

Let’s take a look at the code sample for default collapsible:

<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>

Here, each <li> tag corresponds to a different element for the menu.
Each <li> tag has two sub-elements, one for the title for the menu(collapsible-title) and the other for its description(collapsible-body).

We can add as many <li> tags as we want.

Extensible with arrows

Code Sample for above implication can be:

<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>
</ul>

The only difference for the user is to add class extensible and with-arrow to the existing collapsible class and the plugin takes care of the rest.

Apart from these, there are a total of 178 shades of colour available for the beautification, viz., red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, all available in 10 shades of each, viz., base-colour, colour-lighten-1, colour-lighten-2, colour-lighten-3, colour-lighten-4, colour-lighten-5, colour-accent-1, colour-accent-2, colour-accent-3, colour-accent-4. In addition, colours, brown, grey, blue-grey are also available, with 6 six shades each, viz., base-colour, colour-lighten-1, colour-lighten-2, colour-lighten-3, colour-lighten-4, colour-lighten-5.

Coloured Collapsible with arrows

All you have to do is add a colour class to your <div class=’collapsible-title’> and(or) <div class=’collapsible-body’>
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 script and CSS files are available through jsDelivr, one of the fastest Content Delivery Network(CDN) to ensure smooth functioning of the website or application.

For more information, please visit: https://github.com/AdityaSrivast/AllCollapsible

It is an open source repository and all your support and contribution are welcomed. Please star the repository if you find it worth and do contribute to it. 
I am also planning to add new features in the future release which will further simplify the task of development. Any of your suggestions are heartly welcomed.
You may mail me at: adityasrivast@acm.org
Or, you can also open an issue at : https://github.com/AdityaSrivast/AllCollapsible/issues

For demo please visit:
https://adityasrivast.github.io/AllCollapsible/demo/example.html

Thanks a lot for reading. Have a good day!! :)