About BWL Searchable Accordion jQuery Plugin

If you like this plugin please spare a minute to rate it. If you want any support, Please feel free to contact me via my profile page https://codecanyon.net/user/xenioushk.

Plugin Overview:

BWL Searchable Accordion is A premium jQuery Plugin, which provides you the most quickest and convenient way to create a responsive and animated accordions for your web site or web application with in couple of minutes.

Unique content search feature of the Accordion plugin allows your user to find their required content very easily from a long accordion lists. No need to check every single accordion item. Plugin also highlight the search keywords in to accordion matched contents and it's provide the best user experience. Below the search box, You can also display useful suggestion box with pre-defined keywords based on your accordion content. So, users can quickly get their answers.

Pagination of the Accordion rows is the most useful as well as powerful feature of this plugin. Traditional multi-level accordion needs huge amount of HTML codes and will take too much time to manage accordion rows. Now, you can display a large number of accordion rows with a very small space of you site. No more extra code to manage accordion blocks.

Plugin offers you the most flexible way to customize theme of accordion. In addition, Searchable accordion jQuery plugin comes with 6 pre-defined themes. Also, you have the full freedom to set your very own colors as accordion theme. 3+ stylish navigation box and 4+ custom navigation arrows gives the best looks your accordion content.

If you want to use Searhcable Accordion Plugin in a RTL supported site, then you just need to add a single line of code. Really ? Rest of the things will be automatically handled by the plugin.

Searchable Accordion jQuery plugin comes with well commented JavaScript code and valid HTML5 markup. So that, you can easily customize code without any issue. Package also contain LESS files, which allows you to customize styles by just changing few lines of code. Lets take a look at the major features of Searchable accordion plugin-

Plugin Features:

  • Smooth jQuery & CSS3 based Accordion.
  • Unique search bar to find contents easily.
  • Unlimited Accordions in a single page.
  • 14+ Smooth Animation & Effects.
  • 6 Stylish Predefined Accordion Theme.
  • Less file included for easy CSS customization.
  • Font Awesome.
  • Google Fonts.
  • Retina Ready.
  • RTL Supported.
  • Responsive Accordion.
  • Quick installation and super easy to use.
  • Cross Browser Supported.
  • HTML Demo File.
  • Valid & Well Commented Markup.
  • Extensive Documentation.
  • 6 Months Premium support & Free Lifetime Updates.

Plugin Installation

You must include the CSS Stylesheet in your page header. Make sure file paths are correct, check the 'index.html' file for an example:

<link rel="stylesheet" type="text/css" href="YOUR_PATH_HERE/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="YOUR_PATH_HERE/animate.css" />
<link rel="stylesheet" type="text/css" href="YOUR_PATH_HERE/styles.css" />

You must include the JS files in your page footer before body tag end. Make sure to check your include jquery.min.js file before jquery.bwlaccordion.min.js file and file paths are correct, check the 'index.html' file for an example:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bwlaccordion.min.js"></script>

To insert the accordion into your page, simply open the 'index.html' file in the color you would like, and copy the code between these tags:

<!-- Start BWL Searchable Accordion -->

<!-- End BWL Searchable Accordion -->

HTML Code Structure

This plugin comes with very simple HTML layout to create unlimited no of accordion rows.

Here is the general structure:

<div class="bwl_acc_container" id="accordion_1">
    <div class="accordion_search_container">
        <input type="text" class="accordion_search_input_box search_icon" value="" placeholder="Search ..."/>
        </div> <!-- end .bwl_acc_container -->

    <div class="search_result_container"></div> <!-- end .search_result_container -->

    <section>
        <h2 class="acc_title_bar"><a href="#">Accordion Title #1</a></h2>
        <div class="acc_container">
            <div class="block">
                accordion content for title 1
            </div>
        </div>
    </section>

    <section>
        <h2 class="acc_title_bar"><a href="#">Accordion Title #2</a></h2>
        <div class="acc_container">
            <div class="block">
                accordion content for title 2
            </div>
        </div>
    </section>

    <section>
        <h2 class="acc_title_bar"><a href="#">Accordion Title #3</a></h2>
        <div class="acc_container">
            <div class="block">
                accordion content for title 3
            </div>
        </div>
    </section>

</div> <!-- end .bwl_acc_container -->

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

/*========================================================================*/
/*   TABLE OF CONTENT
/*========================================================================*/
/*
01. Accordion basic styles
    01.1 Expand/Collapse box style.
02. Accordion search container
03. Accordion title bar & Themes 
    03.1 Default theme(Olive)
    03.2 Red theme 
    03.3 Blue theme
    03.4 Green theme
    03.5 Orange theme
    03.6 Yellow theme
    03.7 Custom theme
04. Accordion content
05. Pagination styling
06. Custom nav box
    06.1 Square 
    06.2 Arrow
    06.3 Crcile
07. Custom nav icon
    07.1 Angle
    07.2 Angle Double
    07.3 Caret
    07.4 chevron
08. RTL support
09. Responsive styling
*/
/*========================================================================*/

LESS File Structure:

This template built with LESS. Inside the directory css/less, you will get all less files where variables.less declares all colors and variables and layout.less mainly contain all necessary declaration for css. style.less should be compiled to css/style.css. Other two less files mixins.less and reset.less are for common CSS behaviour.

We have included LESS files with plugin package. You will get all the files inside of css folder. Using this file you can easily customize theme colors. Open "variables.less" file and you will see 5 Predefined color sets already added in that less file. Just change color scheme according to your taste and complie that less file.

@theme-red-title-bar-bg: #E31D1A;
@theme-blue-title-bar-bg: #2D9FD0;
@theme-green-title-bar-bg: #3F9F39;
@theme-orange-title-bar-bg: #FF9900;
@theme-yellow-title-bar-bg: #FFE140;

Compile LESS File:

We have used crunch2 less compiler to generate CSS from less file. It is FREE application and very easy to use. You can download it from the following link. https://getcrunch.co/

Steps To Compile Less File Using Crunch2:

Please follow the steps to compile template LESS file.

Step 01:From Crunch 2 menu open project/template files and select "styles.less" file.

Step 02:Next, from Crunch 2 menu click "Crunch!".

Step 03:Compiler will compile "styles.less" to "styles.css" file and display success message bottom of Crunch 2 editor.

Step 04:Open and edit "css/less/variables.less" file to change font family, primary color and other options.

Plugin Configuration & Example

This plugin comes with extensive options that allow you to configure everything from your index.html file without touching single line of code in plugin file. Lets take a look at options:

// Default Options Setion.
    
$.fn.bwlAccordion.config = {
    search: true, // true/false
    placeholder: 'Search .....', // You can write any thing as a placeholder text.
    suggestion_box: false, // display a suggestion box.
    sbox_title: 'Popular Searches:', // Add custom search box title.
    sbox_keywords: 'FAQ,Purchase', // Add custom keywords for search box.
    search_only_title: false, // Allow search only accordion title.
    theme: 'default', // theme-red/theme-blue/theme-green/theme-orange/theme-yellow
    title_bg: '#2c2c2c', // accordion heading background.
    title_text_color: '#FFFFFF', // accordion heading text color.
    nav_box_bg: '#B8B831', // accordion heading nagivation background.
    title_active_bg: '#414141', // Active accordion bar heading background.
    title_active_text_color: '#F0F0F0', // Active accordion heading tex color.
    nav_active_box_bg: '#d0d051', // Active accordion heading nagivation background.
    animation: 'fade', // flash/shake/tada/swing/wobble/pulse/flipx/faderight/fadeleft/slide/slideup/bounce/lightspeed/roll/rotate/fade/none
    rtl: false,
    msg_item_found: ' Item(s) Found !',
    msg_no_result: 'Nothing Found !',
    ctrl_btn: false, //Display expand all/ collapse all button.
    toggle: false, //Turn it on, If you want to open only one section and keep other section collapsed.
    closeall: true, // Closed all the section on initialization( Added in version 1.0.6),
    item_opened: 0, // If cloase all false then only first item will be opened. Default: 0 (First Child). Set "all" to open all items.
    nav_box: '', // cross/square/arrow/circle (default: cross)
    nav_icon: '', // plus/angle/angle_double/angle_caret/angle_chevron (default: plus)
    highlight_bg: "#FFFF80", // founded item background color
    highlight_color: '#000000', // founded item text color.
    pagination: false, // pagination status.
    limit: 2, // item per page.,
    query_string: false,
    class: ''
};

Default Accordion:

// Accordion with default settings.
$("#accordion_1").bwlAccordion();

Search Placeholder & Custom Message:

//Add Custom Message in search box place holder and search result.
$("#accordion_1").bwlAccordion({
    placeholder: ' Add search box place holder text',
    msg_item_found : ' Add message here for number of items found',
    msg_no_result : ' Add message here for zero item found',
});

Display Search Suggestion Box:

// Example Suggestion Box
$("#default_accordion").bwlAccordion({
    suggestion_box: true,
    sbox_title : 'Trending KeyWords: ',
    sbox_keywords: 'offer, exclusive, free, get, buy, package, accordion'
});

Search Suggestion Box With Pagination:

 // Pagination Example
$("#pagination_example").bwlAccordion({     
    suggestion_box: true,
    sbox_title : 'Popular KeyWords: ',
    sbox_keywords: 'offer, exclusive, free, get, buy, package, accordion',
    query_string: true,
    pagination: true,
    limit: 4,
    theme: 'theme-blue'
});

Enable Query String Support:

//Exampel Query String
$("#query_string_accordion").bwlAccordion({
    query_string: true
});

What is query string support does?

Query string support feature allows you to share a link of your site with a query keyword. That means, now you can customize your accordion page URL and display only specific accordion rows based on that keyword.

For example- your accordion page URL is http://example.com/accordion-demo.html and you have added all your accordion contents in there. Now, you want to share that page link to your customer and when your customer visit that link then they will only view the accordion rows which contain 'popular' word. To do this, you just need to add a new parameter in your URL like this- http://example.com/accordion-demo.html?query=popular

Watch Video Tutorial

Search Only In The Title Text:

// Accordion Search Only In Accordion Title
$("#search_only_title_example").bwlAccordion({
    search_only_title: true
});

Pagination Example:

// Accordion with pagination.
$("#accordion_1").bwlAccordion({     
    pagination: true,
    limit: 4
});

Expand All/Collapse All Buttons:

// Accordion with expand all/ collapse all button.
$("#accordion_1").bwlAccordion({     
    ctrl_btn: true
});

Row Toogle Mode:

// Accordion with toggle section.
$("#accordion_1").bwlAccordion({
    toggle: true
});

All Rows Closed:

// Accordion with all closed section.
$("#accordion_1").bwlAccordion({
    closeall: true
}); 

All Rows Opened:

// Accordion with all opened section.
$("#accordion_1").bwlAccordion({
    closeall: false,
    item_opened: "all",
    theme: 'theme-red'
});

Only Even Rows Opened:


// Accordion with opened only even rows.
$("#accordion_1").bwlAccordion({
    closeall: false,
    item_opened: "even",
    theme: 'theme-blue'
});

Only Odd Rows Opened:

// Accordion with opened only odd rows.
$("#accordion_1").bwlAccordion({
    closeall: false,
    item_opened: "odd",
    theme: 'theme-yellow'
});

Custom Rows Opened (First and Fourth):

// Accordion with opened only custom rows.
$("#accordion_1").bwlAccordion({
    closeall: false,
    item_opened: [0,3],
    theme: 'theme-green'
});

Enable RTL Mode:

//Enable RTL Mode
$("#accordion_1").bwlAccordion({
    rtl : true
});

Animation Settings

This plugin comes with 16 eye-catching animation options that provides the bset effect accordion content.

Example (Fade Animation Settings):

Available Animations: flash/shake/tada/swing/wobble/pulse/flipx/faderight/fadeleft/slide/slideup/bounce/lightspeed/roll/rotate/fade/none

// Fade Example
$("#accordion_1").bwlAccordion({
    animation: 'fade'
});
// shake Example
$("#accordion_1").bwlAccordion({
    animation: 'shake'
});
// tada Example
$("#accordion_1").bwlAccordion({
    animation: 'tada'
});
// swing Example
$("#accordion_1").bwlAccordion({
    animation: 'swing'
});
// wobble Example
$("#accordion_1").bwlAccordion({
    animation: 'wobble'
});
// pulse Example
$("#accordion_1").bwlAccordion({
    animation: 'pulse'
});
// flipx Example
$("#accordion_1").bwlAccordion({
    animation: 'flipx'
});
// faderight Example
$("#accordion_1").bwlAccordion({
    animation: 'faderight'
});
// fadeleft Example
$("#accordion_1").bwlAccordion({
    animation: 'fadeleft'
});
// slide Example
$("#accordion_1").bwlAccordion({
    animation: 'slide'
});
// slideup Example
$("#accordion_1").bwlAccordion({
    animation: 'slideup'
});
// bounce Example
$("#accordion_1").bwlAccordion({
    animation: 'bounce'
});
// lightspeed Example
$("#accordion_1").bwlAccordion({
    animation: 'lightspeed'
});
// roll Example
$("#accordion_1").bwlAccordion({
    animation: 'roll'
});
// rotate Example
$("#accordion_1").bwlAccordion({
    animation: 'rotate'
});
// fade Example
$("#accordion_1").bwlAccordion({
    animation: 'fade'
});
// None Effect Example
$("#accordion_1").bwlAccordion({
    animation: 'none'
});

Theme Settings

Searchable Accodion comes with SIX pre-defined theme with custom theme builder options. Available themes are Olive, Red, Blue, Green, Orange & Yellow.

Default Theme (Olive):

// Accordion with default theme
$("#accordion_theme_default").bwlAccordion();

Red Theme:

// Accordion with Red Theme
$("#accordion_theme_red").bwlAccordion({
    theme 'theme-red'
});

Blue Theme:

// Accordion with Blue Theme
$("#accordion_theme_blue").bwlAccordion({
    theme 'theme-blue'
});

Green Theme:

// Accordion with Green Theme
$("#accordion_theme_green").bwlAccordion({
    theme 'theme-green'
});

Yellow Theme:

// Accordion with Yellow Theme
$("#accordion_theme_yellow").bwlAccordion({
    theme 'theme-yellow'
});

Orange Theme:

// Accordion with Orange Theme
$("#accordion_theme_orange").bwlAccordion({
    theme 'theme-orange'
});

Custom Theme 01:

You can set your own colors for accordion layout.

// Accordion with custom theme 01
    $("#accordion_theme_custom_1").bwlAccordion({
        nav_icon: 'angle',
        nav_box: 'square',
        theme: 'custom',
        title_bg: '#800080',
        title_text_color: '#FFFFFF', // accordion heading text color
        nav_box_bg: '#000000',  // accordion heading nagivation background
        title_active_bg: '#800080', // Active accordion bar heading background
        title_active_text_color: '#F0F0F0', // Active accordion heading tex color
        nav_active_box_bg: '#2c2c2c', // Active accordion heading nagivation background
    });

Custom Theme 02:

Here goes another example of custom theme setup for the accordion.

// Accordion with custom theme 02
    $("#accordion_theme_custom_2").bwlAccordion({
        pagination: true,
        limit: 3,
        nav_icon: 'angle',
        nav_box: 'square',
        theme: 'custom',
        title_bg: '#ff8008',
        title_text_color: '#FFFFFF', // accordion heading text color
        nav_box_bg: '#000000',  // accordion heading nagivation background
        title_active_bg: '#FF8008', // Active accordion bar heading background
        title_active_text_color: '#F0F0F0', // Active accordion heading tex color
        nav_active_box_bg: '#2c2c2c', // Active accordion heading nagivation background
    });

Support & Miscellaneous

BWL Searchable Accordion jQuery plugin comes with six months premium support directly from the developer.

Upgrade Notes

Please take a backup before update all files and folder.

Version: 1.1.3

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.1.2

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.1.1

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.1.0

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.0.9

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.0.8

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.0.7

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.0.6

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.0.5

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.0.4

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.0.3

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.0.2

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.0.1

- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.

Version: 1.0.0

- Initial Release.

Change Log

2020, June, 20 - v 1.1.3

- Add: Multiple word support for the query string parameter.
- Add: Navigation box to the right position.
- Add: Transparent navigation box style.
- Update: Plugin code.
- Update: Plugin documentation.

2019, September, 03 - v 1.1.2

- Fix: Long accordion title fit issue.
- Update: Plugin code.
- Update: Plugin documentation.

2018, August, 10 - v 1.1.1

- Add: option to search only accordion title.
- Add: option to display suggestion box bottom of search box.
- Add: option to query string search.
- Update: Plugin code.
- Update: Plugin documentation.

2018, March, 11 - v 1.1.0

- Add: option to keep open all rows of accordion.
- Add: option to keep open only even rows of accordion.
- Add: option to keep open only odd rows of accordion.
- Add: option to keep open custom rows of accordion.
- Update: Plugin code.
- Update: Plugin documentation.

2018, January, 05 - v 1.0.9

- Update: Plugin code.
- Update: Plugin documentation.

2016, May, 21 - v 1.0.8

- Fix: Pagination box background issue.
- Fix: Custom theme issue for multiple accordion in a page.
- Update: Plugin code.
- Update: Plugin documentation.

2016, May, 19 - v 1.0.7

- Fix: search results counter issue.
- Improved responsive layout.
- Add: custom theme setup option.
- Update: Plugin code.
- Update: Plugin documentation.

2016, January, 30 - v 1.0.6

- Add: Expand all/ Collapse All Button.
- Add: All closed accordion feature.
- Add: 3 new navigation box type.
- Add: 4 new navigation icon type.
- Update: Plugin documentation.

2015, May, 05 - v 1.0.5

- Fix: Live search text Highlight Coloring issue for Chrome/Safari/Opera Browsers.
- Update: Plugin documentation.

2015, April, 26 - v 1.0.4

- Fix: Live search issue for link(anchor) tag.
- Update: Plugin documentation.

2015, March, 22 - v 1.0.3

- Add: Pagination Support for long lists of Accordion contents.
- Add: Easy clear button for small screen.
- Update: Font Awesome stylesheet.
- Update: Plugin documentation.

2014, October, 16 - v 1.0.2

- Add: Highlight search keyword both accordion heading and content.
- Add: Custom highlight background and font color feature.
- Update: Plugin documentation.

2014, September, 03 - v 1.1.2
July 18, 2014 - Version: 1.0.1

- Add: Toggle feature for accordion content.
- Update: Plugin documentation.

2014, July, 09 - v 1.0.0

- Initial Release.

Source & Credit Notes

Back To Top