JQuery fades one id at a time

Question

I am new to jQuery and I am developing some online tutorials. In each tutorial, I want each step to disappear at one time when you press the next button, and then when you show the last step, the next button should be hidden, and the new next button should go to the next guide when pressed. I use ids to assign paragraphs in my HTML. Since I do a lot of tutorials with a different number of steps in each, I would like to easily change this code to fit the number of steps in each tutorial. I tried to code this, and although my code does what I want, it is very dirty and long, and I think there should be a shorter way. Here is my HTML:

<div> <p id="text1">Step one goes here</p> <p id="text2">Step two goes here</p> <p id="text3">Step three goes here</p> <p id="nextstep"><a href="#">Next Step</a></p> <p id="nexttut"><a href="tutorial2.html">Next Tutorial</a></p> </div> 

Thanks EDIT: I want to use only HTML and Javascript

Answer 1

There are several ways to achieve this with jQuery, mainly depending on how much you want to be “magical”.

One pretty simple strategy would be to have a global variable called stepNumber and a data attribute at your steps, for example:

 var stepNumber = 1; $(function(){ $('p[data-step-id="' + stepNumber + '"]').show(); $('#nextstep').click(function(){ $('p[data-step-id="' + stepNumber++ + '"]').fadeOut(); $('p[data-step-id="' + stepNumber + '"]').fadeIn(); }); }); 

 .step { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <p id="text1" class="step" data-step-id="1">Step one goes here</p> <p id="text2" class="step" data-step-id="2">Step two goes here</p> <p id="text3" class="step" data-step-id="3">Step three goes here</p> <p id="nextstep"><a href="#">Next Step</a></p> <p id="nexttut"><a href="tutorial2.html">Next Tutorial</a></p> </div> 

This approach is quite agnostic in the structure of your steps - they do not even have to be in the correct order. In this approach, step identifiers are not required.

but

We could simplify this by assuming that the steps are in order. We can use the nth-child CSS selector to find the next step, and we can compare this with the number of steps to see if the Next Tutorial button needs to be displayed again.

As in the first approach, step identifiers are not actually used.

 var stepNumber = 1; $(function(){ $('p.step:nth-child(' + stepNumber + ')').show(); $('#nextstep').click(function(){ $('p.step:nth-child(' + stepNumber++ + ')').fadeOut(); $('p.step:nth-child(' + stepNumber + ')').fadeIn(); if(stepNumber == $('p.step').length) { $('#nextstep').hide(); $('#nexttut').show(); } }); }); 

 .step, #nexttut { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <p id="text1" class="step">Step one goes here</p> <p id="text2" class="step">Step two goes here</p> <p id="text3" class="step">Step three goes here</p> <p id="nextstep"><a href="#">Next Step</a></p> <p id="nexttut"><a href="tutorial2.html">Next Tutorial</a></p> </div> 

In both cases, I gave the steps a common CSS class so that they can be easily identified in Javascript.

Answer 2

You can find id using [id^="text"] , which searches for identifiers starting with text. and use :hidden to check if you need to fade out again. If in :first there is a fade, and in the next lesson it will disappear.

 $('#nextstep').click(function() { if ($('[id^="text"]:hidden').length) { $('[id^="text"]:hidden:first').fadeIn(); } else { $('#nexttut').fadeIn(); $(this).fadeOut(); } }) 

 [id^=text], #nexttut { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <p id="text1">Step one goes here</p> <p id="text2">Step two goes here</p> <p id="text3">Step three goes here</p> <p id="nextstep"><a href="#">Next Step</a> </p> <p id="nexttut"><a href="tutorial2.html">Next Tutorial</a> </p> </div>