jQuery & Bootstrap Accordion Filter

Easily filter Bootstrap accordion items based on header, body, and custom filter tags.

---

🔧 Setup Instructions

To use this plugin, you need the following elements in your HTML:

• <input id="search-data-input" /> – for searching accordion content (headers & body)
• <input id="filter_data_input" /> – to add filter keywords
• <button id="filter_data_btn">Add</button> – button to submit the filter
• <div id="filter_container"></div> – shows active filter tags

Each collapsible accordion section should contain a data-filter-label attribute, like:

<div class="accordion-collapse collapse" 
     data-filter-label="apple;blue;red">...</div>

You can separate multiple filter tags using a ;. The attribute is required for each accordion item.

🚀 Initialize the Plugin

<script>
var plg = $().btAcc_sf({
  search_input_id: 'search-data-input',
  filter_input_id: 'filter_data_input',
  filter_btn_id: 'filter_data_btn',
  filter_container: 'filter_container',
  lang: 'en'
});
</script>

⚡ Filter Shortcut Buttons

You can also add quick-filter buttons like:

<button class="create_new_filter_data">red</button>

This will filter accordion items containing the tag red.