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
🙂

Pattern Imprinted Process Example 1 Pattern Imprinted Process Example 2 Block Paving Process

Request An Estimate

  • Drop files here or
    Upload maximum 10 files ( Png, Jpg, Jpeg, Pdf, Doc )