I downloaded a similar "Multi Step Form with Progress Bar using jQuery and CSS3".
I managed to display the fieldsets with divs for additional forms or images, so showing the content in the fieldset is not an issue. However, the problem lies with the actual button, specifically the next button, which doesn't work unless placed outside the div.
This is problematic because the button (as well as the previous button) on the next fieldset needs to be inside a div (for styling purposes).
While it advances to the next step, I encountered a issue where the button just disappears. It seems to move left and then fade away. :)
<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<button type="button" class="next action-button btn btn-primary">
Next Step</span>
</button>
On the other hand, this one does not have the issue:
<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<div class="pull-right">
<button type="button" class="next action-button btn btn-primary">
Next Step
</button>
</div>
The button just disappears. Well moves left, then fades. :) The code I have is below.
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
...