liAccordion / Quick Start

Include files <head> ...[THIS CODE]... </head>

To work the plugin the necessary files you must place the files listed below on your server

After this you need to connect these files inside the tag "head" of your site

Typically, style files placed in the folder "css", and script files - in a folder "js", but your folder structure may be another.

If you have an another directory structure, make sure you set the correct path to the files.

<!--If you have already use jquery, then this line is not necessary--> 
<script src="js/jquery-1.11.1.min.js"></script> 

<!-- Plugins files-->
<link rel="stylesheet" href="css/liAccordion.css">
<script src="js/jquery.liAccordion.js"></script> 

Plugins Initialization <head> ...[THIS CODE]... </head>

Once you have written the connection of necessary files, plugin needs to be initialized.

For this purpose, in tag "head" need to add this code below the code of connection.

<script>
$(function(){
	$('.ini_class').liAccordion();
})
</script> 

Option initialize all parameters

<script>
$(function(){
	$('.ini_class').liAccordion({
		currentClass:'cur',				//Class for the selected menu item
		markerClass:'harMark',			//Class for the marker elements
		onlyOne:true,					//true - open can be only one item, false - the number of open items is not limited to
		speed:300,						//Animation speed
		clicablelink:false,				//It enables or disables the clickable links that have attachments
		event:'click',					//The event that accordion headers will react to in order to activate the associated panel. 
		
		colortheme:"Pink",				//Specifies a preset color theme. "BlueGrey", "Red", "Pink", "Purple", "DeepPurple", "Indigo", "Blue", "LightBlue", "Cyan", "Teal", "Green", "LightGreen", "Lime", "Yellow", "Amber", "Orange", "DeepOrange", "Brown", "Grey", "LightGray", "UltraGray", "Black"	
		layout:"menu",					//Sets the basic design of the blocks. "menu", "content", "filter"
		markershape:"square",			//Specifies the shape of the parent marker. "square", "round", "none"
		markersign:"pm",				//Specifies the shape of the sign marker. "pm", "arrow", "triangle"
		markerpos:"right",				//Specifies position of the marker. "right", "left"
		colortype:"bg",					//Specifies that will be painted, background or text. "bg", "text"
																		
		create: function(){},			//Triggered when the liAccordion is created.
		beforeOpen: function(ul){},		//Triggered before open liAccordion Panel.
		afterOpen: function(ul){},		//Triggered after open liAccordion Panel.
		beforeClose: function(ul){},	//Triggered before close liAccordion Panel.
		afterClose: function(ul){}		//Triggered after close liAccordion Panel.		
	});
})
</script> 

HTML <body> ...[THIS CODE]... </body>

For create the code of the menu, you can simply take the most standard and the most spread multi-level menu structure.

For its main parent element you need set the class, wich you assigned in initialization, to plugin to know which menu needed to convert.

  • Accordion Multi-level Menu
      <ul class="ini_class" data-colortheme="Pink" data-layout="menu" data-markershape="square" data-markersign="pm" data-markerpos="right" data-colortype="bg">
      	<li><a href="#">Clicable link 1</a></li>
      	<li><a href="#">Clicable link 2</a>
      		<ul>
      			<li><a href="#">Clicable link 2.1</a></li>
      			<li><a href="#">Clicable link 2.2</a></li>
      			<li><a href="#">Clicable link 2.3</a>
      				<ul>
      					<li><a href="#">Clicable link 2.3.1</a></li>
      					<li><a href="#">Clicable link 2.3.2</a></li>
      					<li><a href="#">Clicable link 2.3.3</a></li>
      					<li><a href="#">Clicable link 2.3.4</a></li>
      				</ul>
      			</li>
      			<li><a href="#">Clicable link 2.4</a></li>
      		</ul>
      	</li>
      	<li><a href="#">Clicable link 3</a></li>
      	<li><a href="#">Clicable link 4</a></li>
      </ul>
  • Accordion Content Panels
      <ul class="ini_class" data-colortheme="Pink" data-layout="content" data-markershape="none" data-markersign="arrow" data-markerpos="left" data-colortype="text">
      	<li><a href="#">What is the Envato Market API?</a>
      		<ul>
      			<!-- Start Any Content -->
      			<p>The Envato Market sites have an API so that ...</p>
      			<!-- End Any Content -->
      		</ul>
      	</li>
      	<li><a href="#">How do I use the API?</a>
      		<ul>
      			<!-- Start Any Content -->
      			<p>If you're a developer and would like ...</p>
      			<!-- End Any Content -->
      		</ul>
      	</li>
      	<li><a href="#">What is an API key?</a>
      		<ul>
      			<!-- Start Any Content -->
      			<p>Your API key is a password for applications to ...</p>
      			<!-- End Any Content -->
      		</ul>
      	</li>
      </ul>
      
  • Accordion Product Filter
      <ul class="ini_class" data-colortheme="Pink" data-layout="filter" data-markershape="none" data-markersign="triangle" data-markerpos="right" data-colortype="text">
      	<li> <a href="#"> <span>Phones &amp; Telecommunications</span> </a>
      		<ul>
      			<li> <a href="#">Mobile Phones</a> <span>(346696)</span>
      				<ul>
      					<li> <a href="#">Mobile Phones</a> <span>(346696)</span> </li>
      					<li> <a href="#">Phone Bags &amp; Cases</a> <span>(14122765)</span> </li>
      					<li> <a href="#">Backup Powers</a> <span>(147439)</span> </li>
      				</ul>
      			</li>
      			<li> <a href="#">Phone Bags &amp; Cases</a> <span>(14122765)</span> </li>
      			<li> <a href="#">Backup Powers</a> <span>(147439)</span> </li>
      		</ul>
      	</li>
      	<li> <a href="#">Function</a>
      		<ul>
      			<li> <a href="#">Waterproof</a> <span>(69740)</span> </li>
      			<li> <a href="#">Dirt-resistant</a> <span>(11721669)</span> </li>
      			<li> <a href="#">Power Case</a> <span>(41850)</span> </li>
      			<li> <a href="#">Water/Dirt/Shock Proof</a> <span>(42836)</span> </li>
      		</ul>
      	</li>
      </ul>
      

Options

Option Default value Datatype Description
currentClass 'cur' String Class for the selected menu item
It may take the values: any Latin characters
markerClass 'harMark' String Class for the marker elements
It may take the values: any Latin characters
onlyOne true bolean true - open can be only one item, false - the number of open items is not limited to
It may take the values: true or false
speed 300 number Animation speed
It may take the values: any positive number
clicablelink false bolean It enables or disables the clickable links that have attachments
It may take the values: true or false
event 'click' string The event that accordion headers will react to in order to activate the associated panel.
It may take the values: any mouse event
colortheme 'Pink' string

Specifies a preset color theme

It may take the values: "BlueGrey", "Red", "Pink", "Purple", "DeepPurple", "Indigo", "Blue", "LightBlue", "Cyan", "Teal", "Green", "LightGreen", "Lime", "Yellow", "Amber", "Orange", "DeepOrange", "Brown", "Grey", "LightGray", "UltraGray", "Black"

This option can be set using the attribute "data-colortheme"

<ul class="ini_class" data-colortheme="Pink"> [YOUR LIST] </ul>

layout 'menu' string

Sets the basic design of the blocks

It may take the values: "menu", "content", "filter"

This option can be set using the attribute "data-layout"

<ul class="ini_class" data-layout="menu"> [YOUR LIST] </ul>

markershape 'square' string

Specifies the shape of the parent marker

It may take the values: "square", "round", "none"

This option can be set using the attribute "data-markershape"

<ul class="ini_class" data-markershape="square"> [YOUR LIST] </ul>

markersign 'pm' string

Specifies the shape of the sign marker

It may take the values: "pm", "arrow", "triangle"

This option can be set using the attribute "data-markersign"

<ul class="ini_class" data-markersign="pm"> [YOUR LIST] </ul>

markerpos 'right' string

Specifies position of the marker

It may take the values: "right", "left"

This option can be set using the attribute "data-markerpos"

<ul class="ini_class" data-markerpos="right"> [YOUR LIST] </ul>

colortype 'bg' string

Specifies that will be painted, background or text

It may take the values: "bg", "text"

This option can be set using the attribute "data-colortype"

<ul class="ini_class" data-colortype="bg"> [YOUR LIST] </ul>


Methods

destroy()

Removes all the functionality of menu. It returns the item in the condition before the initialization of the plug-in

$('.your_class').liAccordion('destroy');
disable()

Blocking of plugin work

$('.your_class').liAccordion('disable');
enable()

Unblocking of plugin work

$('.your_class').liAccordion('enable');
collapseall()

Collapsing all panels

$('.your_class').liAccordion('collapseall');
expandall()

Expanding all panels

$('.your_class').liAccordion('expandall');

Events

create()

Triggered when the liAccordion is created

$('.ini_class').liAccordion({
create: function(){}
});

beforeOpen()

Triggered before open liAccordion Panel.

$('.ini_class').liAccordion({
beforeOpen: function(){}
});

afterOpen()

Triggered after open liAccordion Panel.

$('.ini_class').liAccordion({
afterOpen: function(){}
});

beforeClose()

Triggered before close liAccordion Panel

$('.ini_class').liAccordion({
beforeClose: function(){}
});

afterClose()

Triggered after close liAccordion Panel

$('.ini_class').liAccordion({
afterClose: function(){}
});


Marker Types

To main parent element of plugin you must assign three attributes, which are responsible for displaying the marker:

1. Marker Shape:

data-markershape="square"

- "square" (default)
- "round"
- "none"

2. Marker Sign:

data-markersign="pm"

- "pm" (default)
- "arrow"
- "triangle"

2. Marker Position:

data-markerpos="right"

- "right" (default)
- "left"


example:
<ul class="ini_class" data-colortheme="Pink" data-layout="menu" data-markershape="square" data-markersign="triangle" data-markerpos="left" data-colortype="bg"> [YOUR LIST] </ul>

 
marker-pos-right
marker-pos-left
 
marker-sign-pm
marker-sign-arrow
marker-sign-triangle
marker-sign-pm
marker-sign-arrow
marker-sign-triangle
data-markershape="square"
Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title
data-markershape="round"
Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title
data-markershape="none"
Panel Title Panel Title Panel Title Panel Title Panel Title Panel Title

Layout Types

In the style of plugin provides three basic types of structure.

By manipulating the attribute "data-layout", you will be able to use this plug-in for all your needs

data-layout="menu"

- "menu" (default)
- "content"
- "filter"


example:
<ul class="ini_class" data-colortheme="Pink" data-layout="menu" data-markershape="square" data-markersign="triangle" data-markerpos="left" data-colortype="bg"> [YOUR LIST] </ul>


Color Classes

These color values are already present in the file liAccordion.css

attribute "data-colortype" specifies that will be painted, background or text

data-colortype="bg"

- "bg" (default)
- "text"

example:
<ul class="ini_class" data-colortheme="Pink" data-layout="menu" data-markershape="square" data-markersign="triangle" data-markerpos="left" data-colortype="bg"> [YOUR LIST] </ul>

BlueGrey
Red
Pink
Purple
DeepPurple
Indigo
Blue
LightBlue
Cyan
Teal
Green
LightGreen
Lime
Yellow
Amber
Orange
DeepOrange
Brown
Grey
LightGray
UltraGray
Black

Responsive Multi Level Accordion Navigation

DOWNLOAD liAccordion