Getting started

Installation

First of all it's necessary to include all required files into your website.

1) Unzip file downloaded from codecanyon to desired location.
2) Go to directory Templates/Horizontal/ or Templates/Vertical/.
3) Inside the mentioned directory is another directory jAccordion/. Copy and paste this directory to the same directory as your website.
4) Open .html file of your website in your favourite editor.
5) Copy and paste code below to your .html file between tags <head></head>.

Note: It's important to include .js files in this order: jQuery, jQuery easing plugin, jAccordion plugin otherwise you may experience unexpected behaviour.

<!--CSS file carrying theme of jAccordion-->
<link type="text/css" href="jAccordion/default.css" rel="stylesheet">
<!--jQuery - minified version, use version 1.4.3 or newer (except 1.8.0)-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--jQuery easing plugin - minified version-->
<script type="text/javascript" src="jAccordion/jquery.easing.1.3.min.js"></script>
<!--jAccordion - minified version-->
<script type="text/javascript" src="jAccordion/jquery.jAccordion-1.2.5.min.js" ></script>

HTML markup

The next step is to add HTML markup to body section of your website.

1) Choose 1 of the 3 markups below. I recommend the first one in most cases but it's your decision.
2) Copy and paste it to your .html file between tags <body></body> where you want to display jAccordion.

Note: You can remove class noJS from parent container if you don't care about JS fallback.

Div elements

Example of jAccordion markup using div elements:

<div class="accordion noJS">
	<div class="jAccordion-slidesWrapper">
		<div class="jAccordion-slide"><!--Content of slide1--></div>
		<div class="jAccordion-slide"><!--Content of slide2--></div>
		<div class="jAccordion-slide"><!--Content of slide3--></div>
		<div class="jAccordion-slide"><!--Content of slide4--></div>
	</div>
</div>

Unordered list

Example of jAccordion markup using unordered list:

<div class="accordion noJS">
	<ul class="jAccordion-slidesWrapper">
		<li class="jAccordion-slide"><!--Content of slide1--></li>
		<li class="jAccordion-slide"><!--Content of slide2--></li>
		<li class="jAccordion-slide"><!--Content of slide3--></li>
		<li class="jAccordion-slide"><!--Content of slide4--></li>
	</ul>
</div>

Definition list

Example of jAccordion markup using definition list:

<div class="accordion noJS">
	<dl class="jAccordion-slidesWrapper">
		<dd class="jAccordion-slide"><!--Content of slide1--></dd>
		<dd class="jAccordion-slide"><!--Content of slide2--></dd>
		<dd class="jAccordion-slide"><!--Content of slide3--></dd>
		<dd class="jAccordion-slide"><!--Content of slide4--></dd>
	</dl>
</div>

Adding content

Content of jAccordion is placed inside slides - elements with class jAccordion-slide. jAccordion can contain 2 or more slides (well it can contain even 1 slide but what's point of that).

Example of jAccordion slide using div element (Note: Slide doesn't have to be just a div element as mentioned in the previous section HTML markup):

<div class="jAccordion-slide"><!--Here is place for content of a slide--></div>

A slide can contain basically any HTML elements such as images, paragraphs, headings, lists, divs, spans, etc. Special type of content are animated elements.

Example of 2 slides containing various types of content:

<!--Slide1 - just an image-->
<div class="jAccordion-slide">
	<img src="images/img1.png" width="910" height="380" alt="some alternative text" />
</div>
<!--Slide2 - vimeo video, unordered list and image-->
<div class="jAccordion-slide">
	<iframe src="http://player.vimeo.com/video/7449107" width="400" height="300" frameborder="0" 
		webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
	<ul>
		<li>Lorem ipsum dolor</li>
		<li>Lorem ipsum dolor</li>
		<li>Lorem ipsum dolor</li>
		<li>Lorem ipsum dolor</li>
		<li>Lorem ipsum dolor</li>
	</ul>
	<img src="images/banner1.png" width="910" height="380" alt="some alternative text4" />
</div>

Dimensions

Next step is to set default size of jAccordion, which is done via .css file.

1) Open file default.css in your favourite editor. This file is located in directory called jAccordion mentioned in section Installation.
2) Find css rule .accordion {} and change values max-width (default width) and height (default height) to suit your needs. Never add property width or you'll lose responsiveness.

Example of css rule .accordion{}:

.accordion {
	height: 380px;
	margin: 0 auto;
	max-width: 980px;	/* Do not replace max-width with width or you'll lose responsiveness */
	outline: none !important;
	position: relative;
}

jAccordion activation

Next step is activation of the plugin.

1) Copy and paste code below to your .html file between tags <head></head> beneath the code you added in section Installation.
2) Read the next section and if everything works you can remove function ready().

Shortest possible configuration section with ability to check whether jAccordion works:

<script type="text/javascript">
	  $(document).ready(function() {
	  	$('.accordion').jAccordion({
			//Here goes options and callbacks separated by comma
			//You can remove the next 3 lines after reading the next section called 'Test of functionality'
			ready : function() {
				alert('jAccordion successfully loaded');
			}
		});
	});
</script>

Test of functionality

Now you can test your website in browser, alert which states: jAccordion successfully loaded should be displayed.

Alert wasn't displayed

First: Make sure that path to .js files mentioned in section Installation is correct.
Second: Make sure you added code (in the right place) mentioned in the previous section jAccordion activation.

Alert was displayed but accordion looks messed up

First: Make sure that path to .css file mentioned in section Installation is correct.
Second: Make sure that some of accordion css rules are not overriden by yours.

jAccordion by maniacpc, exclusively for CodeCanyon