BWL Searchable Accordion jQuery Plugin ” Documentation by “ Md Mahbub Alam Khan” v1.0.8


BWL Searchable Accordion jQuery Plugin v1.0.8

Created: 06/07/2014
Last Edited: 21/05/2016
By: Md Mahbub Alam Khan
Support: Send Me A Message
Web Site: www.bluewindlab.net

Thank you for purchasing BWL Searchable Accordion jQuery Plugin. If you like this scripts, feel free to rate it five stars at CodeCanyon downloads section. If you encounter any problems please do not give a low rating but contact me first. So I can help you.
Thank You!


Table of Contents

  1. Overview
  2. Installation
  3. HTML Structure
  4. JS Code & Plugin Configuration
  5. CSS Files & Structure
  6. LESS Files
  7. Upgrade Notes
  8. Change Log
  9. Credits
  10. Conclusion

A. Overview - top

BWL Searchable Accordion jQuery Plugin provide you a great way to create responsive and animated accordions for your website. This jQuery plugin comes with well commented jQuery code and valid HTML5 markup, so that you can easily customize code without any issue. Package also contain Less files, so you can create unlimited number of themes by just changing few colors. Lets take a look major features-

Features

Accordion Output-

B. Installation - top

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

C. HTML Structure - top

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

D. JS Code & Plugin Configuration - top

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
    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: false, // Closed all the section on initialization( Added in version 1.0.6),
    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.
};
- Example (Default Settings):
$("#accordion_1").bwlAccordion();
- 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'
});
- Example ( Setup a Custom Theme ):
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
});
- Example (RTL Support):
$("#accordion_1").bwlAccordion({
    rtl : true,
    pagination: true, // pagination status.
    limit: 2 // item per page.
});
- Example (Pagination Support):
$("#accordion_1").bwlAccordion({
    rtl : true
});
- Example (Add Custom Message Settings):
$("#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',
});

E. CSS Files and Structure - top

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
        1.1 Expand/Collapse box style.
    02. Accordion search container
    03. Accordion title bar & Themes 
        3.1 Default theme(Olive)
        3.2 Red theme 
        3.3 Blue theme
        3.4 Green theme
        3.5 Orange theme
        3.6 Yellow theme
        3.7 Custom theme
    04. Accordion content
    05. Pagination styling
    06. Custom nav box
            6.1 Square 
            6.2 Arrow
            6.3 Crcile
    07. Custom nav icon
            7.1 Angle
            7.2 Angle Double
            7.3 Caret
            7.4 chevron
    08. RTL support
    09. Responsive styling
/*========================================================================*/

F. LESS Files - top

I've included LESS files. You will get that 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;

G. Upgrade Notes - top

2016, May, 21 - Version: 1.0.8
- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.
2016, May, 19 - Version: 1.0.7
- Update styles/styles.css file.
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files.
January 30, 2016 - Version: 1.0.6
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files
May 5, 2015 - Version: 1.0.5
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files
April 26, 2015 - Version: 1.0.4
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files
March 22, 2015 - Version: 1.0.3
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files
- Update styles/styles.css file.
October 16, 2014 - Version: 1.0.2
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files
- Update styles/styles.css file.
July 18, 2014 - Version: 1.0.1
- Update js/jquery.bwlaccordion.min.js and js/jquery.bwlaccordion.js files
July 9, 2014 - Version: 1.0.0
- Initial Release.

H. Change Log - top

2016, May 21, 2016 - Version: 1.0.8

- Fixed pagination box background issue.
- Fixed custom theme issue for multiple accordion in a page.
- Improved Plugin code.
- Updated Documentation.

2016, May 19, 2016 - Version: 1.0.7

- Fixed search results counter issue.
- Improved responsive layout.
- Added custom theme setup option.
- Improved Plugin code.
- Updated Documentation.

January 30, 2016 - Version: 1.0.6

- Added Expand all/ Collapse All Button.
- Added All closed accordion feature.
- Added 3 new navigation box type.
- Added 4 new navigation icon type.
- Updated Documentation.

May 5, 2015 - Version: 1.0.5

- Fixed live search text Highlight Coloring issue for Chrome/Safari/Opera Browswer.
- Updated Documentation.

April 26, 2015 - Version: 1.0.4

- Fixed live search issue for link(anchor) tag.
- Updated Documentation.

March 22, 2015 - Version: 1.0.3

- Added Pagination Support for long lists of Accordion contents.
- Added Easy clear button for small screen.
- Updated Font Awesome stylesheet.
- Updated Documentation.

October 16, 2014 - Version: 1.0.2

- Added Highlight search keyword both accordion heading and content.
- Added Custom highlight background and font color feature.
- Updated Documentation.

July 18, 2014 - Version: 1.0.1

- Add toggle feature for accordion content.
- Updated Documentation.

July 9, 2014 - Version: 1.0.0

- Initial Release.


I. Sources and Credits - top

- Ideas & Coded By Md Mahbub Alam Khan

- Icons By FontAwesome

J. Conclusion: - top

Once again, thank you so much for purchasing BWL Searchable Accordion jQuery Plugin.

Md. Mahbub Alam Khan

Go To Table of Contents