AccordionList-plugin has a function to organize several sections, sorted by title and their respective content. It was written in JavaScript using the jQuery library.

jquery plugin for sorting pagination and filtering, jquery sort filter, jquery multiple filter plugin, jquery grid with pagination sorting and searching

Responsive Accordion UI Design using HTML CSS and JavaScript

How to make use of it:

1. Load the jQuery library and jQuery plug-in in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/accordion.js"></script>

2. Download Font Awesome 4 for UI Icons.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

3. Add your content to the accordion list by following the Html syntax as follows:

<section id="accordion">
  <div data-type="accordion-section" data-filter="type1">
    <h3 data-type="accordion-section-title">Section 4</h3>
    <div class="accordion-content" data-type="accordion-section-body">
      Content 4 
      Type 1
    </div>
  </div>
  <div data-type="accordion-section">
    <h3 data-type="accordion-section-title">Section 1</h3>
    <div class="accordion-content" data-type="accordion-section-body">
      Content 1 
    </div>
  </div>
  <div data-type="accordion-section" data-filter="type2">
    <h3 data-type="accordion-section-title">Section 3</h3>
    <div class="accordion-content" data-type="accordion-section-body">
      Content 3 
      Type 2
    </div>
  </div>
  <div data-type="accordion-section" data-filter="type2">
    <h3 data-type="accordion-section-title">Section 2</h3>
    <div class="accordion-content" data-type="accordion-section-body">
      Content 2 
      Type 2
    </div>
  </div>
  <div data-type="accordion-section" data-filter="type1">
    <h3 data-type="accordion-section-title">Section 7</h3>
    <div class="accordion-content" data-type="accordion-section-body">
      Content 7 
      Type 1
    </div>
  </div>
  <div data-type="accordion-section">
    <h3 data-type="accordion-section-title">Section 6</h3>
    <div class="accordion-content" data-type="accordion-section-body">
      Content 6
    </div>
  </div>
  <div data-type="accordion-section" data-filter="type1">
    <h3 data-type="accordion-section-title">Section 5</h3>
    <div class="accordion-content" data-type="accordion-section-body">
      Content 5 
      Type 1
    </div>
  </div>
</section>

4. Create a search box for the accordion list.

<input type="text" placeholder="search in list" name="search" id="search" data-type="accordion-search">

5. Create an accordion list filter using HTML select elements.

<select name="filter" id="filter" data-type="accordion-filter">
  <option value="default">all</option>
  <option value="type1">Type 1</option>
  <option value="type2">Type 2</option>
</select>

6. Create buttons to rearrange the accordion list.

<div id="btn-div">
  <button data-type="accordion-ordering" ordering="asc" class="btn-ordering"></button>
  <button data-type="accordion-ordering" ordering="desc" class="btn-ordering"></button>
</div>

7. CSS template for designing the accordion menu and controls.

.header-default {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d1d1;
  border-radius: 4px 4px 0 0;
  background-color: #edecec;
  color: #3a3a3a;
  margin-bottom: -0.9em !important;
  cursor: pointer;
}

.header-default:hover { background-color: #e0e0e0; }

.header-active {
  background-color: #97d79d !important;
  margin-bottom: 0px !important;
}

.header-active:hover { background-color: #7cd382 !important; }

.content-default { display: none; }

.right { float: right; }

.accordion-content {
  text-align: justify;
  box-sizing: border-box;
  margin: 0px;
  padding: 15px;
  border: 1px solid #d1d1d1;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.inline { display: inline; }

.btn-ordering {
  margin: 0px 10px 0px 10px;
  border: 1px solid inherit;
  background-color: #e0e0e0;
  min-width: 80px;
  border-radius: 4px;
}

.btn-ordering:hover {
  border-style: inset;
  background-color: #bcbcbc;
}

#btn-div {
  margin-top: 40px;
  text-align: right;
}
 
[data-type="accordion-search"] {
 min-height: 15px;
 border-radius: 4px;
}

[data-type="accordion-filter"] {
 min-height: 15px;
 border-radius: 0px;
 min-width: 120px;
 height: 20px;
}

Sortable & Filterable jQuery Accordion Plugin, AccordionList Plugin/Github

See Demo And Download

Official Website(emanuelteixeira11): Click Here

This superior jQuery/javascript plugin is developed by emanuelteixeira11. For extra Advanced Usages, please go to the official website.