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="https://code.jquery.com/jquery-3.5.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

More Demos

liAccordion / Quick Start

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

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

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

Options

Methods

Events

Marker Types

Layout Types

Color Classes