Tiny Filterable Accordion List Plugin For jQuery - Collapsable List
File Size: | 37.7KB |
---|---|
Views Total: | 2078 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Collapsable List is a simple jQuery plugin which turns standard html unordered lists into a searchable and collapsable list with smooth accordion animations.
Basic Usage:
1. Markup html structure
<ul id="demo"> <li class="header">A</li> <ul> <li>Afghanistan</li> <li>Albania</li> <li>Algeria</li> <li>Andorra</li> <li>Angola</li> <li>Antigua and Barbuda</li> <li>Argentina</li> <li>Armenia</li> <li>Aruba</li> <li>Australia</li> <li>Austria</li> <li>Azerbaijan</li> </ul> <li class="header">B</li> <ul> <li>Bahamas, The</li> <li>Bahrain</li> <li>Bangladesh</li> <li>Barbados</li> <li>Belarus</li> <li>Belgium</li> <li>Belize</li> <li>Benin</li> <li>Bhutan</li> <li>Bolivia</li> <li>Bosnia and Herzegovina</li> <li>Botswana</li> <li>Brazil</li> <li>Brunei </li> <li>Bulgaria</li> <li>Burkina Faso</li> <li>Burma</li> <li>Burundi</li> </ul> <li class="header">C</li> <ul> <li>Cambodia</li> <li>Cameroon</li> <li>Canada</li> <li>Cape Verde</li> <li>Central African Republic</li> <li>Chad</li> <li>Chile</li> <li>China</li> <li>Colombia</li> <li>Comoros</li> <li>Congo, Democratic Republic of the</li> <li>Congo, Republic of the</li> <li>Costa Rica</li> <li>Cote d'Ivoire</li> <li>Croatia</li> <li>Cuba</li> <li>Curacao</li> <li>Cyprus</li> <li>Czech Republic</li> </ul> </ul>
2. Load jQuery javascript library and collapsable-list.js script before your closing </body>
tag.
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="js/libs/collapsable-list.js"></script>
3. Call the plugin with options
<script type="text/javascript"> $('#demo').collapsableList('.header', {search: true}); </script>
4. Animation.
<script type="text/javascript"> $('#demo').collapsableList('.header', {search: true,animate:true}); </script>
This awesome jQuery plugin is developed by sebastien-roch. For more Advanced Usages, please check the demo page or visit the official website.