Getting started

Installation

This tutorial describes how to install the default horizontal theme, installation of other themes is identical.

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/Default horizontal accordion/.
3) Inside the mentioned directory is another directory jAccordion/. Copy and paste this directory to the directory where files of your website are placed.
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 (optional), jAccordion plugin, otherwise you may experience unexpected behaviour.

<!--CSS file containing a 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.10.2/jquery.min.js"></script>
<!--jQuery easing plugin - minified version, no need to insert this script if you use default easing metod -->
<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.6.min.js" ></script>

HTML markup

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

1) Open index.html located in folder Templates/Default horizontal accordion/ in your favourite editor.
2) Copy HTML code starting with <div class="accordion noJS"> from the mentioned file and paste it to .html file of your website.

Note : jAccordion allows you to use different types of markup, you can choose one of those mentioned in the summary below.

Note #2: 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 slide 1 --></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>
		<!-- Place here as many slides as you want -->
	</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 slide 1 --></li>
		<li class="jAccordion-slide"><!-- Content of slide 2 --></li>
		<li class="jAccordion-slide"><!-- Content of slide 3 --></li>
		<li class="jAccordion-slide"><!-- Content of slide 4 --></li>
		<!-- Place here as many slides as you want -->
	</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 slide 1 --></dd>
		<dd class="jAccordion-slide"><!-- Content of slide 2 --></dd>
		<dd class="jAccordion-slide"><!-- Content of slide 3 --></dd>
		<dd class="jAccordion-slide"><!-- Content of slide 4 --></dd>
		<!-- Place here as many slides as you want -->
	</dl>
</div>

HTML5

You can even use HTML5 elements such as section but keep in mind that older browsers doesn't support HTML5, thus jAccordion won't work correctly in those browsers (you can use html5shiv to make it work in the older browsers):

<div class="accordion noJS">
	<div class="jAccordion-slidesWrapper">
		<section class="jAccordion-slide"><!-- Content of slide 1 --></section>
		<section class="jAccordion-slide"><!-- Content of slide 2 --></section>
		<section class="jAccordion-slide"><!-- Content of slide 3 --></section>
		<section class="jAccordion-slide"><!-- Content of slide 4 --></section>
		<!-- Place here as many slides as you want -->
	</div>
</div>

Dimensions

The next step is to set size of jAccordion, which is done via .css file. Default size of the horizontal theme is 980x380px so you can skip this section if you are satisfied with these values.

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 {} (usually placed at the top of the .css file) and change values max-width (default width) and height (default height) to suit your needs. Never add property width or you'll lose responsiveness.

jAccordion activation

The next step is activation of the plugin.

1) Copy configuration section from Templates/Horizontal/index.html and paste it to your .html file between tags <head></head> beneath the code you added in section Installation. Configuration section is placed between tags <head></head>. Below you can see an example of configuration section.
2) Open .html file of your website in your favourite browser.
3) If everything works well you can change content of the slides. You are allowed to add any html element to slide, iframe, list, images, youtube videos, vimeo videos, ...

Example of a configuration section:

<script type="text/javascript">
	  // Avoid conflict with other libraries
	  jQuery(document).ready(function( $ ) {
	  	$('.accordion').jAccordion({
			activeSlideSize : 700,
			onReady : function() {
				$('.preloader', this.$accordion).remove();
			}
		});
	});
</script>

HTML5 data attributes

Since jAccordion v1.2.6 there is a possibility to specify options via data attributes, which is useful if you want to create multiple similar instances of jAccordion on one page. You can specify the identical options in the configuration section and the options that differs can be specified via data attributes of every instance.

<script type="text/javascript">
	  // Avoid conflict with other libraries
	  jQuery(document).ready(function( $ ) {
	  	$('.accordion').jAccordion({
			// Here comes options identical for all instances
		});
	});
</script>
<!-- Eeach accordion has different option transitionSpeed -->
<div class="accordion noJS" data-options='{"transitionSpeed": 5000}'><!-- Content of accordion --></div>
<div class="accordion noJS" data-options='{"transitionSpeed": 1000}'><!-- Content of accordion --></div>