[dspp_old] [dspp_panel] [dspp_step href='#content1' label='1']Description[/dspp_step] [dspp_step href='#content2' label='2']Implementation - way 1[/dspp_step] [dspp_step href='#content3' label='3']Implementation - way 2[/dspp_step] [dspp_content id='content1']
Step one - description
This example show the simplest way to implement Dynamic Step Process Panels.

Features:
- 3 steps (width configurable in css),
- first step selected,
- step-by-step mode,
- previous and next buttons,
- step labels,
- every step can be choosed again,
- fade effect speed 1 second,
- style green-blue [/dspp_content] [dspp_content id='content2']
Step two - implementation way 1
All you got to do is insert appropiate html code with WordPress shortcodes. For this example looks like this: 
[dspp]
[dspp_panel]
	[dspp_step href="#content1" label="1"]Description[/dspp_step]
	[dspp_step href="#content2" label="2"]Implementation - way 1[/dspp_step]
	[dspp_step href="#content3" label="3"]Implementation - way 2[/dspp_step]
	[dspp_content id="content1"]content for step 1[/dspp_content]
	[dspp_content id="content2"]content for step 2[/dspp_content]
	[dspp_content id="content3"]content for step 3[/dspp_content]
[/dspp_panel]
[/dspp_content] [dspp_content id='content3']
Step three - implementation way 2
You can also implement Dynamic Step Process Panels without dspp_step and dspp_content shortcodes. For this example the code looks like this: 
[dspp]
<div id="processPanel" class="panel">
	<a href="#content1" label="1">
		Description
	</a>
	<a href="#content2" label="2">
		Implementation - way 1
	</a>
	<a href="#content3" label="3">
		Implementation - way 2
	</a>
	<div id="content1">content for step 1</div>
	<div id="content2">content for step 2</div>
	<div id="content3">content for step 3</div>
</div>
[/dspp_content] [/dspp_panel] [inline] [/inline] [dspp_old id='processPanel2' icons='false' kind='freeChoice' style='orange-gray' nextPrevButtons='false' onOpen='customOnOpen'] [dspp_panel id='processPanel2' style='margin-top: 30px;'] [dspp_step href="#p2content1" class="p2Step1"]Description[/dspp_step] [dspp_step href="#p2content2" class="p2Step2"]Implementation-way 1[/dspp_step] [dspp_step href="#p2content3" class="p2Step3"]Implementation-way 2[/dspp_step] [dspp_step href="#p2content4" class="p2Step4"]Enjoy![/dspp_step] [dspp_content id="p2content1"]
Step one - description
This example show Dynamic Step Process Panels without label icons, and next previous buttons. You don't have to move step-by-step.

Features:
- 4 steps (width configurable in css),
- free choice mode,
- every step can be choosed again,
- first step selected,
- fade effect speed 1 second,
- style orange-gray,
- onOpen event implemented [/dspp_content] [dspp_content id="p2content2"]
Step two - implementation way 1
The classes p2Step1, p2Step2, p2Step3, p2Step4 are used just to specify the steps width. The Inline javascript plugin has been used for inline javascript code.

[inline]
<script type="text/javascript">
var timesOpened = 0;
function customOnOpen(event, step, content, stepNumber)
{
	$(".message").remove();
	if(stepNumber==2)
	{
		timesOpened++;
		content.prepend("<div class='message'>You've opened this step " 
+ timesOpened + " time" + (timesOpened>1 ? "s":"") + ".</div>");
	}
}
</script>
[/inline]

[dspp id='processPanel2' icons='false' kind='freeChoice' style='orange-gray'
nextPrevButtons='false' onOpen='customOnOpen']
[dspp_panel id="processPanel2" class="panel"]
	[dspp_step href="#p2content1" class="p2Step1"]Description[/dspp_step]
	[dspp_step href="#p2content2" class="p2Step2"]Implementation - way 1[/dspp_step]
	[dspp_step href="#p2content3" class="p2Step3"]Implementation - way 2[/dspp_step]
	[dspp_step href="#p2content4" class="p2Step4"]Enjoy![/dspp_step]
	[dspp_content id="p2content1"]content for step 1[/dspp_content]
	[dspp_content id="p2content2"]content for step 2[/dspp_content]
	[dspp_content id="p2content3"]content for step 3[/dspp_content]
	[dspp_content id="p2content4"]content for step 4[/dspp_content]
[/dspp_panel]
[/dspp_content] [dspp_content id="p2content3"]
Step three - implementation way 2
[inline]
<script type="text/javascript">
var timesOpened = 0;
function customOnOpen(event, step, content, stepNumber)
{
	$(".message").remove();
	if(stepNumber==2)
	{
		timesOpened++;
		content.prepend("<div class='message'>You've opened this step " 
+ timesOpened + " time" + (timesOpened>1 ? "s":"") + ".</div>");
	}
}
</script>
[/inline]

[dspp id='processPanel2' icons='false' kind='freeChoice' style='orange-gray'
nextPrevButtons='false' onOpen='customOnOpen']
<div id="processPanel2" class="panel">
	<a href="#p2content1" class="p2Step1">
		Description
	</a>
	<a href="#p2content2" class="p2Step2">
		Implementation - html
	</a>
	<a href="#p2content3" class="p2Step3">
		Implementation - js
	</a>
	<a href="#p2content4" class="p2Step4">
		Enjoy!
	</a>
	<div id="p2content1">content for step 1</div>
	<div id="p2content2">content for step 2</div>
	<div id="p2content3">content for step 3</div>
	<div id="p2content4">content for step 4</div>
</div>
[/dspp_content] [dspp_content id="p2content4"]
Step four
:) [/dspp_content] [/dspp_panel] [dspp_old id='processPanel3' style='blue-maroon' event='mouseover' firstSelected='false' fadeSpeed='500'] [dspp_panel class='panel clearfix' id='processPanel3' style='margin-top: 30px;width:778px;'] [dspp_step href="#p3content1" label="1" class="p3Step1"]Description[/dspp_step] [dspp_step href="#p3content2" label="2" class="p3Step2"]Implementation[/dspp_step] [dspp_step href="#p3content3" label="3" class="p3Step3"]Step three[/dspp_step] [dspp_step href="#p3content4" label="4" class="p3Step4"]Step four[/dspp_step] [dspp_content id="p3content1"]
Step one - description
This example show Dynamic Step Process Panels without opened the first step at the begin.

Features:
- 4 steps,
- first step is not opened at the begin,
- contents opens on mouseover,
- step-by-step mode,
- fade effect speed 0,5 second,
- style blue-maroon,
- previous and next buttons,
- step labels
[/dspp_content] [dspp_content id="p3content2"]
Step two - implementation
Available after purchase [/dspp_content] [dspp_content id="p3content3"]
Step three
Some content for step three [/dspp_content] [dspp_content id="p3content4"]
Step four
Some content for step four [/dspp_content] [/dspp_panel] [inline] [/inline] [dspp_old id='processPanel9' style='blue-orange' onOpen='formValidation'] [dspp_panel class="panel clearfix" id="processPanel9" style="margin-top: 30px;"] [dspp_step href="#p9content1" label="1"]Description[/dspp_step] [dspp_step href="#p9content2" label="2"]Implementation-way 1[/dspp_step] [dspp_step href="#p9content3" label="3"]Implementation-way 2[/dspp_step]
[dspp_content tag='fieldset' id="p9content1"]
Step one - description
This example shows how to integrate Dynamic Step Process Panels with form.

Features:
- 3 steps (width configurable in css),
- custom form validation,
- first step selected,
- step-by-step mode,
- previous and next buttons,
- step labels,
- every step can be choosed again,
- fade effect speed 1 second,
- style blue-orange
Please enter your name before you go to the second step:
name:
[/dspp_content] [dspp_content tag='fieldset' id="p9content2"]
Step two - implementation way 1
Please enter your e-mail before you go to the third step:
e-mail:
Source code available after purchase
[/dspp_content] [dspp_content tag='fieldset' id="p9content3"]
Step three - implementation way 2
2+3=  
Source code available after purchase
[/dspp_content]
[/dspp_panel]