Dynamic Step Process Panels is a lightweight jQuery plugin. It allows that any content can be represented in any number of tabs / steps. Can be used to:

• presentating bulleted content,
• multisteps forms,
• provide a description of products,
• viewing photos,
• anything that comes to your mind :).

Implementation involves writing the WP shortcodes or html code of an appropriate structure (WP shortcodes structure, HTML structure). Implementation requires 2 steps:

• Step 1 - put Dynamic Step Process Panels shortcode into your page:

  [dspp_old]

• Step 2 - write WP shortcodes or HTML structure to create steps and its contents.

The first thing you need to do is to write the appropriate WP shortcodes. Below is a sample code. More examples with descriptions can be found in live preview examples. This example shows how to write WP shortcodes structure for Dynamic Step Process Panels consisting of 3 steps.

[dspp_old]
[dspp_panel]
	[dspp_step href="#content1" label="1"]Step 1 title[/dspp_step]
	[dspp_step href="#content2" label="2"]Step 2 title[/dspp_step]
	[dspp_step href="#content3" label="3"]Step 3 title[/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]

The second way to display the steps is to show them in the popup. WP shortcodes structure is very similar. You should also create a button or link, after you click the popup will open.

<!--create button/link which opened the popup-->
<!--link must have the href attribute with the same value as the id of the process panel with '-popup' suffix-->

<a href="#processPanelPopup-popup">open popup</a>

<!--now create the process panel structure-->

[dspp_old id='processPanelPopup']

<!--popup have to be positioned absolute, the class popup provides it-->

[dspp_panel id='processPanelPopup' class='panel popup']
	[dspp_step href="#content1" label="1"]Step 1 title[/dspp_step]
	[dspp_step href="#content2" label="2"]Step 2 title[/dspp_step]
	[dspp_step href="#content3" label="3"]Step 3 title[/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]
				

The first thing you need to do is to write the appropriate HTML code. Below is a sample code. More examples with descriptions can be found in live preview examples. This example shows how to write html structure for Dynamic Step Process Panels consisting of 3 steps.

[dspp_old]
<div id="processPanel" class="panel">
	<a href="#content1" label="1">
		Step 1 title
	</a>
	<a href="#content2" label="2">
		Step 2 title
	</a>
	<a href="#content3" label="3">
		Step 3 title
	</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>

The second way to display the steps is to show them in the popup. Html structure is very similar. You should also create a button or link, after you click the popup will open.

<!--create button/link which opened the popup-->
<!--link must have the href attribute with the same value as the id of the process panel with '-popup' suffix-->

<a href="#processPanelPopup-popup">open popup</a>

<!--now create the process panel structure-->
<!--popup have to be positioned absolute, the class popup provides it-->

[dspp_old id="processPanelPopup"]
<div id="processPanelPopup" class="panel popup">
	<a href="#content1">
		Step 1 title
	</a>
	<a href="#content2">
		Step 2 title
	</a>
	<a href="#content3">
		Step 3 title
	</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>
				

There is some parameters that can defined behaviour or look of the steps panel. It can be used in [dspp_old] shortcode.

example: [dspp_old id='processPanel2' kind='freeChoice' style='blue-gray' icons='false' event='mouseover']

Parameter	Default value	Possible values	Description
id	processPanel	-	Specifies the identifier of the steps panel. If you want to use many panels on one site, you should specify by each an unique id parameter.
kind	stepByStep	stepByStep freeChoice	Specifies the behaviour of the steps panel. Parameter stepByStep forces the user to open steps one after another. Parameter freeChoice allow free choice.
style	green-blue	green-blue blue-gray blue-green blue-maroon blue-orange green-gray green-maroon green-orange maroon-blue maroon-gray maroon-green maroon-orange orange-blue orange-gray orange-green orange-maroon	Specifies the coloristic version of the step panel. 16 predefined base / hover color styles available.
firstSelected	true	true false	Specifies that the first step is open on start or not.
icons	true	true false	Specifies that the icons under the step labels shows or not.
imgFolder	img	-	Specifies the path to folder which contains the sprite_with_icons.png, sprite_without_icons.png and sprite_buttons.png images.
chooseAgain	true	true false	Specifies that the step can be chosen again.
nextPrevButtons	true	true false	Specifies that the next and previous buttons will show.
nextPrevButtonsPosition	bottom	bottom top	Specifies the next and previous buttons position.
nextButtonTitle	Next step	-	Specifies the next button caption.
prevButtonTitle	Previous step	-	Specifies the previous button caption.
fadeSpeed	1000	-	Specifies the fade effect speed (in miliseconds) when the step is changed. Set to 0 if you want to disable effect.
event	click	click mouseover	Specifies the type of event to be used for open step content.
packed	true	true false	If set to true, the minified version of javascript will be loaded (jquery.processPanel.min.js). If set to false, standard version of javascript will be loaded (jquery.processPanel.js).
jquery	true	true false	If set to true jquery-1.7.1.min.js will be loaded. If set to false jquery-1.7.1.min.js won't be loaded.

There is also some predefined events that you can use to expand step panel functionality. In fact events are specific parameters and the implementation of its look similar (check How to use custom events).
Notice: If you want to prevent default event functionality, use return false; instruction inside your custom event function.

Event	Aviable arguments	Description
beforeLoad	-	This event is triggered before step panel will be initialized.
onLoad	-	This event is triggered after step panel has been initialized.
onOpen	event step content stepNumber	This event is triggered before opening step content.
afterOpen	event step content stepNumber	This event is triggered after opening step content.
onHoverIn	event step stepNumber	This event is triggered when step is hovered.
onHoverOut	event step stepNumber	This event is triggered when step hover is out.
onOpenPopup	event button panel	This event is triggered before opening process panel displayed as a popup.
onClosePopup	event button panel	This event is triggered after opening process panel displayed as a popup.

To use custom events you've got to write javascript function and point it in appropiate event parameter.
Example: alert a message about successfully loaded panel.

<script type="text/javascript">
function alertMessage(message)
{
	alert(message);
}
</script>
[dspp_old onLoad='alertMessage("Panel loaded successfully!")']
[dspp_panel]
	[dspp_step href="#content1" label="1"]Step 1 title[/dspp_step]
	[dspp_step href="#content2" label="2"]Step 2 title[/dspp_step]
	[dspp_step href="#content3" label="3"]Step 3 title[/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]
				

You can also implement own function in another way - by write it body right in parameter.
Example:

[dspp_old onLoad='function(){alert("Panel successfully loaded!");}']
[dspp_panel]
	[dspp_step href="#content1" label="1"]Step 1 title[/dspp_step]
	[dspp_step href="#content2" label="2"]Step 2 title[/dspp_step]
	[dspp_step href="#content3" label="3"]Step 3 title[/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]

You can also use parameters in dspp_panel, dspp_step and dspp_content shortcodes. Below the list of available:

• dspp_panel

Parameter	Default value	Description
tag	div	Defines the html tag of the steps panel node.
id	processPanel	Defines the id attribute of the steps panel.
class	panel	Defines the class attribute of the steps panel.
style	-	Defines the style attribute of the steps panel. Using this parameter you can define inline styles for the panel.

• dspp_step

Parameter	Default value	Description
tag	a	Defines the html tag of the step node.
class	-	Defines the class attribute of the step.
href	-	Defines the href attribute of the step.
label	-	Defines the label attribute of the step.

• dspp_content

Parameter	Default value	Description
tag	a	Defines the html tag of the step content node.
id	-	Defines the id attribute of the step content.
class	-	Defines the class attribute of the step content.

You can find style sheets for coloristic versions in colors wp-content/plugins/dynamic_step_process_panels/colors/ folder.
The Dynamic Step Process Panels plugin has several important css classes.
The classes dspp_step, dspp_step-green-blue (depends on color version), dspp_step1 (depends on step number), dspp_step1-green-blue (only for first step, depends on color version) are added automaticaly on load to every step element.
So you can define the width of each step using .dspp_step1, .dspp_step2, .dspp_step3 etc. classes. For example:

.dspp_step1
{
	width: 100px;
}
.dspp_step2
{
	width: 110px;
}
.dspp_step3
{
	width: 150px;
}

When you use many step panels on one site you should use custom classes to specify style of each step. For example:

.myStep1, .myStep2, .myStep3
{
	width: 100px;
}

Remember to attach the classes to steps:

[dspp_step href="#content1" class="myStep1"]Step 1 title[/dspp_step]
[dspp_step href="#content2" class="myStep2"]Step 2 title[/dspp_step]
[dspp_step href="#content3" class="myStep3"]Step 3 title[/dspp_step]

Here are some classes that define style of step panel, steps and contents. You can find them in wp-content/plugins/dynamic_step_process_panels/style.css file.

• Panel that is the container for the steps and their content

.dspp_panel
{
	background-color: #ffffff;
	border: 1px solid #dbe6ee;
	padding: 10px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
					

• Step class that is added to every step autamatically

.dspp_step
{
	float: left;
	position: relative;
	margin-left: -20px;
	width: 351px;
	height: 43px;
	font-size: 16px;
	padding-left: 20px;
	padding-top: 18px;
	background-image: url("img/sprite_with_icons.png");
	background-repeat: no-repeat;
	outline: none;
}
					

• Step label class

.dspp_stepLabel
{
	position: absolute;
	top: 19px;
	right: 30px;
}
					

• Last step label class

.dspp_stepLabelLast
{
	position: absolute;
	top: 19px;
	right: 25px;
}

• Content class

.dspp_content
{
	clear: both;
	padding: 10px;
	line-height: 150%;
}
					

• Next and previous buttons classes

.dspp_nextPrevButtons
{
	clear: both;
	width: 310px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	padding-bottom: 10px;
}
.dspp_nextPrevButtons .dspp_button:first-child
{
	margin-right: 10px;
}
.dspp_nextPrevButtons .dspp_button
{
	float: left;
	display: block;
	width: 150px;
	height: 34px;
	padding-top: 12px;
	text-align: center;
	background-image: url("img/sprite_buttons.png");
	background-repeat: no-repeat;
	cursor: pointer;
}
.dspp_nextPrevButtons .dspp_inactiveButton
{
	background-position: -10px -310px;
	color: #ffffff;
}
					

You can load the content for some steps from files via AJAX technology. In this case, in href attribute of the step you must enter the address to the file from which content will be loaded and the element identifier, in which content will be placed. For example:

[dspp_old]
[dspp_panel]
	[dspp_step href="step1Content.html#content1" label="1"]Description[/dspp_step]
	[dspp_step href="step2Content.html#content2" label="2"]HTML[/dspp_step]
	[dspp_step href="#content3" label="3"]JavaScript[/dspp_step]
	[dspp_content id="content1"][/dspp_content]
	[dspp_content id="content2"][/dspp_content]
	[dspp_content id="content3"]static content for step 3[/dspp_content]
[/dspp_panel]

In the above example content for first step is loaded from file step1Content.html to dspp_content with attribute id="content1". Content for second step is loaded from file step2Content.html to dspp_content with attribute id="content2". Content for third step is static, placed in dspp_content with attribute id="content3".
For more check example 2 in livePreview-page2(displayed as a popup).html file (examples). Check live preview examples source code - there is many panels on one site. To see examples with sample code check below files:

• live preview - page 1
• live preview - page 2 (panels displayed as a popup)

If you have any questions, please contact me via contact form in my profile.