Andrea[{Cfm}]

Default. Open the next element.

$('.slide1').slidePanel();
HTML
<p class="slide1">Slide 1</p>
<div> Slide 1Lorem ipsum dolor ....</div>

Open any element in the page.

• target : jQuery - point to any element or elements in the page.

$('.slide2').slidePanel({ target:'.target_2' });
HTML
<p class="slide2">slide2</p>
<div class="target_2">lorem....</div>

The target element starts opened.

• status : String - Attr : 'open' - Default is 'closed'.

$('.slide3').slidePanel({ status:'open' });
HTML
<p class="slide3">slide 3</p>
<div>lorem....</div>

Insert content via Ajax.

• remote : boolean - Default is 'false'.
• To permit script degrades gracefully the link to the source to load must be inserted in an a element (first child of the calling panel element).
• If used with status='open' the content is loaded on page load event. By default is loaded on first click event.

$('.slide4').slidePanel({ remote:'true' });
HTML
<p class="slide4"><a href="{url}">slide 4</a></p>
<div>lorem....</div>

Open any number of element in the page. The calling element preserve the class (panel-up - panel-down) for styling. Add status:'open' for let the target start opened.

• Use the target attribute to point the event to a class assigned to many element.
• Element can start open or closed and will be toggled from their own original position.

$('.slide5').slidePanel({ target:'.target5' });
HTML
<p class="slide5">Slide 5</p>
<div class="target_5"> Slide 1Lorem ipsum dolor ....</div>
<div class="target_5"> Slide 1Lorem ipsum dolor ....</div>

Panel can be related in base of their roles:

• Panels work normally as they were singles.
• The master panel move himself and the dependants. All panels starts sliding from the actual position.
• In any position are respected the classes that permit the arrow (or any other) styling
• Master element must be declared after all the dependants.

$('.dep1').slidePanel({ status:'open', role:'dep' });
$('.dep2').slidePanel({ role:'dep' });
$('.master').slidePanel({ status:'open', role:'master' });
HTML
<p class="master">Master Panel</p>
<div>Lorem ...</div>
<p class="dep1">Dependant Panel 1</p>
<div>Lorem... </div>
<p class="dep2">Dependant Panel 2</p>
<div>Lorem... </div>

Accordion behaviour:

• Permit only one element opened ( event closed automatically all the othere element).
• Element are not forced to be in a list as for normal accordion but must respect the basic syntax ( target must be the very nexy element to his calling panel element).

$('.acc').slidePanel({ role:'accordion' });
HTML
<p class="acc">Accordion</p>
<div>Lorem ...</div>
<p class="acc">Accordion</p>
<div>Lorem... </div>
<p class="acc">Accordion</p>
<div>Lorem... </div>