here's the code snippet I'm working with:
$(document).ready(function(){
$('#next').click(function() {
$('.current').removeClass('current').hide()
.next().show().addClass('current');
if ($('.current').hasClass('last')) {
$('#next').attr('disabled', true);
}
$('#prev').attr('disabled', null);
});
$('#prev').click(function() {
$('.current').removeClass('current').hide()
.prev().show().addClass('current');
if ($('.current').hasClass('first')) {
$('#prev').attr('disabled', true);
}
$('#next').attr('disabled', null);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<title>javascript problem</title>
</head>
<body>
<div id='div1' class="first current">
<p>
here the content of div 1
</p>
<button id="next">Start</button>
</div>;
<div id='div2'>
<p>
here the content of div 2
</p>
<button id="next">Next</button>
</div>;
//then another 9 divs
<div id='div12' class="last">
<input type="submit" value="submit" onclick="submit()">
</div>;
<div class="buttons">
<button id="prev" disabled="disabled">Prev</button>
<button id="next">Next</button>
</div>;
</body>
</html>i am trying to have the buttons within each div and not at the bottom, so they do not appear at the end and i want to change their values on the first page. when i try this, the buttons stop functioning.
the code sample is not currently functional but it should show the next div when 'next' is clicked.
this is how i would like it to be presented:
<div id='div1' class='first current'>
<p>here the content of div 1</p>
<button id="next">Start</button>
</div>
hopefully that clears things up