AccordionLite

Normal Accordion

Normal Accordion will give us more control over html since we are defining Accordion headers and it's child elements as HTML elements by our own. This will benefit the developer to redefine the default css and html. You can achieve the same as described below:-

HTML:-

<!DOCTYPE html>
<html>
<body>

<div id="accordionLite">
<div class="options easyAccordion">
<div class="headerElement"> Cutomizations </div>
<span class="images"> </span>
</div>
<div class="elementContainer">
<div class="element"> Sample Entry</div>
<div class="element"> Sample Entry</div>
<div class="element"> Sample Entry</div>
<div class="element"> Sample Entry</div>
<div class="element"> Sample Entry</div>
</div>
<div class="options easyAccordion">
<div class="headerElement"> Themes </div>
<span class="images"> </span>
</div>
<div class="hide elementContainer">
<div class="element"> Sample Entry</div>
<div class="element"> Sample Entry</div>
<div class="element"> Sample Entry</div>
<div class="element"> Sample Entry</div>
<div class="element"> Sample Entry</div>
</div>
<div id="accordionLite">
<div class="options easyAccordion">
<div class="headerElement"> Other </div>
<span class="images"> </span>
</div>
<div class="hide elementContainer">
<div class="element"> Sample Entry</div>
<div class="element"> Sample Entry</div>
<div class="element"> Sample Entry</div>
<div class="element"> Sample Entry</div>
<div class="element"> Sample Entry</div>
</div>

</body>
</html>

Script:-

$(document).ready(function(){
AccordionLite.normalAccordion();
});

Image Property

Image Property in Accordion Lite will help the user to set the images for Accordion Header (Up Arrow / Down Arrow). User has to pass an object of images into setArrow function. Below mentioned code snippet will help the user to achieve the same below:-

Script:-

$(document).ready(function(){
AccordionLite.setArrow({ 'upArrow': '../Images/arrowUp.png', 'downArrow': '../Images/arrowDown.png' });
});

Result :-

Height Property

Height Property in Accordion Lite will help the user to set the height of the container element which holds whole accordion child elements. User has to pass an object with height and overflow-y as its parameters into setHeight function. Below mentioned code snippet will help the user to achieve the same. below:-

Script:-

$(document).ready(function(){
AccordionLite.setHeight({ 'height': '200px', 'overflow-y': 'auto' });
});

Result :-

Button Implementation

Button implementation itself shows the extensibility of AccordionLite Plugin to implement a button as an element of your accordion. Sample shown below will describe the easiness to pass a button as an element into AccordionLite.

Script:-

$(document).ready(function(){
var accordion = [{ "HeaderName": "Customization","Elements": ["<input type='button' style='border-radius:4px; width:200px;' value='Sample Button'/>"]},{ "HeaderName": "Themes", "Elements": ["Glossy", "Flat", "Curved"]}];
});

Result :-

Large Text Implementation

Large Text elements can be incorporate with in AccordionLite. Similar to other elements it will render as a an element of AccordionLite.

Script:-

$(document).ready(function(){
var accordion = [{ "HeaderName": "Customization",
"Elements": ["Large Text (Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. )"]}];
});

Result :-

Set Theme Implementation

AccordionLite provides a predefined function for user to customize the theme of accordion control. User has to pass an object with backgroundcolor,color for header element and its child elements into setTheme function. Below mentioned code snippet will help the user to achieve the same.

Script:-

$(document).ready(function(){
AccordionLite.setTheme({ 'header': { 'backgroundcolor': '#4dd2db', 'color': 'white' }, 'elements': { 'backgroundcolor': '#eaeef2', 'color': '#363636' } });
});

Gradient Theme Implementation

AccordionLite using basic css function call to set the gradient for accordion control. This can be achieved by finding the parent elements defined inside the container and apply the gradient class to the parent accordion elements: Please have a look at the code snippet mentioned below:-

Script:-

$(document).ready(function(){
$('#accordionLite').find('.options.easyAccordion').addClass('gradientTheme');
});

Similarly we can find all the child elements and apply css.Please have a look at the code snippet mentioned below:-

Script:-

$(document).ready(function(){
$('#accordionLite').find('.element').css('background-color', '#eaeef2');
});

$(document).ready(function(){
$('#accordionLite').find('.options.easyAccordion').css('background-color', 'none');
});

Curved corner Theme Implementation

AccordionLite provides a predefined function for user to customize the theme of accordion control. User has to pass an object with radiusParent,radisuChild and its values for header element and its child elements into setTheme function. Below mentioned code snippet will help the user to achieve the same.

Script:-

$(document).ready(function(){
AccordionLite. setTheme({ 'radiusParent': '4px', 'radiusChild': '4px' });
});

Blue Theme Implementation

AccordionLite provides a predefined function for user to customize the theme of accordion control. User has to pass an object with backgroundcolor,color for header element and its child elements into setTheme function. Below mentioned code snippet will help the user to achieve the same.

Script:-

$(document).ready(function(){
AccordionLite.setTheme({ 'header': { 'backgroundcolor': '#4dd2db', 'color': 'white' }, 'elements': { 'backgroundcolor': '#eaeef2', 'color': '#363636' } });
});

Light Green Theme Implementation

AccordionLite provides a predefined function for user to customize the theme of accordion control. User has to pass an object with backgroundcolor,color for header element and its child elements into setTheme function. Below mentioned code snippet will help the user to achieve the same.

Script:-

$(document).ready(function(){
AccordionLite.setTheme({ 'header': { 'backgroundcolor': '#4dd2db', 'color': 'white' }, 'elements': { 'backgroundcolor': '#eaeef2', 'color': '#363636' } });
});

Light Gray Theme Implementation

AccordionLite provides a predefined function for user to customize the theme of accordion control. User has to pass an object with backgroundcolor,color for header element and its child elements into setTheme function. Below mentioned code snippet will help the user to achieve the same.

Script:-

$(document).ready(function(){
AccordionLite.setTheme({ 'header': { 'backgroundcolor': '#4dd2db', 'color': 'white' }, 'elements': { 'backgroundcolor': '#eaeef2', 'color': '#363636' } });
});

Flat Theme Implementation

AccordionLite provides a predefined function for user to customize the theme of accordion control. User has to pass an object with backgroundcolor,color for header element and its child elements into setTheme function. Below mentioned code snippet will help the user to achieve the same.

Script:-

$(document).ready(function(){
AccordionLite.setTheme({ 'header': { 'backgroundcolor': '#4dd2db', 'color': 'white' }, 'elements': { 'backgroundcolor': '#eaeef2', 'color': '#363636' } });
});

Credits

AccordionLite

Jquery Accordion

Easy Implementation:
AccordionLite makes it easier for the user by supporting easy implementation of accordion functionality. One of the major advantage of AccordionLite is easy implementation, user can download the AccordionLite plugin js file. By reffering the same on top of your html file and with one line html code and couple of lines of script will create the accordion for the user.
Customization:
Like other accordion plugin, AccordionLite also supports different level of customizations. We can customize the height, image files. AccordionLite provides built-in functions to achieve the same. All that user need to do is just pass the value of the height parameter or URI of the image files.
Unlike other accordion plugin, AccordionLite provides default themes for accordion. User can use any of those or user can customize the theme by doing the necessary changes in CSS file which will be available with our AccordionLite Plugin.
File Size:
AccordionLite provides a lightweight javascript file( size of 4kb ) to achieve the accordion functionality. Since it is lightweight, the end user will experience an infinitesimal hype in performance.

Normal Implementation:
In Jquery Accordion we have to write minimal amount of code to achieve accordion functionality. We have to define the parent element and its child elements in html file, then we need to call the accordion funtion in script tag to generate the accordion control.
This way of implementation will give more control for the developers on the accordion css customizations. So in AccordionLite we are supporting this way of implementation.
Customization:
Jquery Accordion provides a large set of options,methods and events to do different customizations. These customized functions helps the user to achieve the functionality with less amount of code and stress. Passing proper values as the parameters to each function will create the accordion controls for the user.
Considering the ease of implemention and user experience, AccordionLite also providing a couple of important customizations for the user. AccordionLite find some interest in theme level customization by providing set of default themes.
File Size:
Jquery Accordion providing the js file which is large in size compared to AccordionLite. The plugin js file of Jquery Accordion which doesn't have any customization support itself takes 38-40kb.
AccordionLite plugin js file has a size of 4kb . If the user would like to use any of the default theme, that will be available in Theme.js which has the size of 3kb. User can also choose the supporting code for the theme from theme.js, which will make the file very small in terms of file size.

Instructions

There are couple of instructions that you must follow while developing accordion controls using AccordionLite.

1) Set Arrow Images:- While developing accordion control, if we are using Easy Implementation method we can use setArrow function to set accordion arrows. But we should call this function before the accordion control generating function 'AccordionLite.accordion'.
Since the accordion arrows are the part of accordion control we should set these values/path before the accordion control generation. Once we set the image uri path, it will refer that path to access the accordion arrow images during the generation of accordion control. Script:-

$(document).ready(function(){
AccordionLite.setArrow({ 'upArrow': '../Images/arrowUp.png', 'downArrow': '../Images/arrowDown.png' }); AccordionLite.accordion(accordion);
});

2) Set Height Value:- While developing accordion control, we can set the child element container height using setHeight function. But we should call this function only after the the accordion control generating function 'AccordionLite.accordion'. Script:-

$(document).ready(function(){
AccordionLite.accordion(accordion);
AccordionLite.setHeight({ 'height': '200px', 'overflow-y': 'scroll' });
});

Like AccordionLite