I have small problem
Here is JSfiddle: link example
HTML CODE
<body>
<div class="content">
<!-- Multistep Form -->
<div class="main">
<form action="" class="regform" method="get">
<!-- Progress Bar -->
<ul id="progressbar">
<li class="active">01</li>
<li>02</li>
<li>03</li>
<li>04</li>
</ul>
<!-- Fieldsets -->
<fieldset id="first">
<h2>press visa or master to go next question</h2>
<div class="cc-selector">
<input id="visa" type="radio" name="credit-card" value="visa" />
<label class="kuvake visa jump-next-question" for="visa"></label>
<input id="mastercard" type="radio" name="credit-card" value="mastercard" />
<label class="kuvake mastercard jump-next-question"for="mastercard"></label>
</div>
</fieldset>
<fieldset id="second">
<h2>02 press visa jump fourth question but if press mastercard go next question</h2>
<div class="cc-selector">
<input id="visa" type="radio" name="credit-card" value="visa" />
<label class="kuvake visa jump-fourth-question" for="visa"></label>
<input id="mastercard" type="radio" name="credit-card" value="mastercard" />
<label class="kuvake mastercard jump-next-question"for="mastercard"></label>
</div>
</fieldset>
<fieldset id="third">
<h2>03 press visa or master to go next question</h2>
<div class="cc-selector">
<input id="visa1" type="radio" name="credit-card" value="visa1" />
<label class="kuvake visa1 jump-next-question" for="visa1"></label>
<input id="mastercard1" type="radio" name="credit-card" value="mastercard1" />
<label class="kuvake mastercard1 jump-next-question"for="mastercard1"></label>
</div>
<input class="next_btn" name="next" type="button" value="Next">
</fieldset>
<fieldset id="fourth">
<h2>04</h2>
<div class="cc-selector">
<input id="visa2" type="radio" name="visa2" value="visa2" />
<label class="kuvake visa2" for="visa2"></label>
<input id="mastercard2" type="radio" name="master2" value="mastercard2" />
<label class="kuvake mastercard2"for="mastercard2"></label>
</div>
<input class="next_btn" name="next" type="button" value="Next">
</fieldset>
</form>
jQuery code
$(document).ready(function() {
$(".jump-next-question").click(function() { // Function Runs On NEXT Button Click
$(this).closest('fieldset').next().fadeIn('slow');
$(this).closest('fieldset').css({
'display': 'none'
});
// Adding Class Active To Show Steps Forward;
$('.active').next().addClass('active');
});
});
$(document).ready(function() {
$(".jump-fourth-question").click(function() { // Function Runs On NEXT Button Click
$(this).closest('jump-fourth-question').next().fadeIn('slow');
$(this).closest('fieldset').css({
'display': 'none'
});
// Adding Class Active To Show Steps Forward;
$('.active').next().addClass('active');
});
});
I have small demo quiz, and I need to get questions go to next answer and that works ok, but when we are question number two if you answer visa you should jump to the question number fourth and show it but it wont work.
Any help here?
Thanks.
The problem in your code is due to .closest() in click event of class .jump-fourth-question.Since you are searching for closest with same class name it is redirecting to 02 again and you are using display:none for it.So you are not getting any result.
The other problem is you are using document $(document).ready(function(){}); twice.Avoid ding that.
Your Jquery should be:
$(document).ready(function() {
$(".jump-next-question").click(function() { // Function Runs On NEXT Button Click
$(this).closest('fieldset').next().fadeIn('slow');
$(this).closest('fieldset').css({
'display': 'none'
});
// Adding Class Active To Show Steps Forward;
$('.active').next().addClass('active');
});
$(".jump-fourth-question").click(function() { // Function Runs On NEXT Button Click
$(this).closest('fieldset').next().next().fadeIn('slow');
$(this).closest('fieldset').css({
'display': 'none'
});
// Adding Class Active To Show Steps Forward;
$('.active').next().next().addClass('active');
});
});
EDIT:
Yes you can directly use the id #fourth
$(".jump-fourth-question").click(function() {
$('#fourth').fadeIn('slow');
});