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-->
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/adityasrivast/AllCollapsible@1.1.0/dist/css/allcollapsible.min.css">
  <!--Minified js file-->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/adityasrivast/AllCollapsible@1.1.0/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>

USAGE:

Default

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

Extensible

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

Collapsible With Arrows

Default

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

Extensible

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

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:

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

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.dev@gmail.com

DEPENDENCIES

JQuery 1.4 or higher

LICENSE

MIT License