Tiny Filterable Accordion List Plugin For jQuery - Collapsable List

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.