BWL Searchable Accordion jQuery Plugin

BWL Searchable Accordion jQuery Plugin

• Plugin Version:1.1.5
• Last Update:23/11/2024
• Create Date: 06/07/2014
• Web Site: https://bluewindlab.net
• Premium Support: Send Message
• Developed By: Md Mahbub Alam Khan
• Skype: bluewindlab

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

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-

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.

Accordion Output-

bwl_searchable_accordion_jquery_plugin/
├─ assets/
├─ lib/
│ ├─ animate
│ ├─ font-awesome
│ ├─ fonts
│ ├─ jquery
├─ src/
│ ├─ images
│ ├─ js
│ ├─ styles
│ ├─ index.js
├─ .gitignore
├─ index.html
├─ package.json
├─ README.md
                

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="libs/font-awesome/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="libs/animate/animate.css">
<link rel="stylesheet" type="text/css" href="assets/bwlaccordion.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="libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/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 -->

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 -->

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
};

- Default Accordion Example:

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

- Search Only In Title Accordion Example:

// 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 Button Example:

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

- Toggle Mode Example:

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

- All Closed Example:

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

- All Accordion Rows Opened Example:

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

- Opened Only Even Rows Example:

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

- Opened Only Odd Rows Example:

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

- Opened Only Custom (First and Fourth) Rows Example:

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

- RTL Mode Example:

$("#accordion_1").bwlAccordion({
    rtl : true,
    pagination: true, // pagination status.
    limit: 2 // item per page.
});

- Example (Fade Animation Settings):

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

$("#accordion_1").bwlAccordion({
    animation: 'fade'
});

- Example (Shake Animation With Red Theme):

Available Themes: theme-red/theme-blue/theme-green/theme-orange/theme-yellow/theme-custom

$("#accordion_1").bwlAccordion({
    animation: 'shake', 
    theme: 'theme-red'
});

- Setup a Custom Theme Settings:

You can set your own colors for accordion layout.

$("#accordion_1").bwlAccordion({
    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
});

- Search Box Custom Message Settings:

//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',
});

- Example ( Enable RTL Mode):

$("#accordion_1").bwlAccordion({
    rtl : true
});

- Example (Search Suggestion Box):

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

- Example (Search Suggestion Box With Pagination):

$("#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'
});

- Example (Enable Query String Support):

            $("#query_string_accordion").bwlAccordion({
                query_string: true
            });

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
*/
/*========================================================================*/

I've included SCSS files. You will get that files inside of src/styles/ folder. Using this file you can easily customize theme colors. Open "base/_variables.scss" 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;

• Add Custom Search Keywords In Suggestion Box
• How Query String Works In Searchable Accordion

1. jQuery Plugin
   
2. Font Awesome