Description Implementation - way 1 Implementation - way 2
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
Step two - implementation way 1
All you got to do is insert WordPress shortcode, with specified id (defined in admin panel). For this example looks like this:

[dspp id='example1']
Step two - implementation way 2
You can also use different way of implementation, using [dspp_old], [dspp_panel], [dspp_step] and [dspp_content] shortcodes. For this example looks like this:

[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']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]

Description Implementation-way 1 Implementation-way 2 Enjoy!
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
Step two - implementation way 1
<script type='text/javascript'>
var timesOpened = 0;
</script>
[dspp id='example2']
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_old 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]
Step four
🙂

Description Implementation Step three Step four
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
Step two - implementation
[dspp id='example3']
Step three
Some content for step three
Step four
Some content for step four