I have an empty div that is written purely in HTML:
I then have some jQuery:
var prevLink = '<a class="back" href="#">Back</a>';
var nextLink = '</a><a class="next" href="#">Next</a>';
var navHTML = '<div class="prev-next">' +
prevLink +
nextLink +
'</div>';
var prevLink = '<a class="back" href="#">Back</a>';
var nextLink = '</a><a class="next" href="#">Next</a>';
var navHTML = '<div class="prev-next">' +
prevLink +
nextLink +
'</div>';
jQuery(document).ready(function( $ ) {
// init
$('#customisesystem > div')
.hide()
.prepend(navHTML);
$('#first-step .prev').remove();
$('#last-step .next').remove();
// show first step
$('#first-step').show();
$('a.next').click(function(){
var whichStep = $(this).parent().parent().attr('id');
if( whichStep == 'first-step' )
{
// validate first-step
}
else if( whichStep == 'second-step' )
{
// validate second-step
}
else if( whichStep == 'last-step' )
{
// validate last-step
}
$(this).parent().parent().hide().next().show();
});
$('a.back').click(function(){
$(this).parent().parent().hide().prev().show();
});
});
How can I place the back and next buttons created by the jQuery within the progress-buttons div?