CODEWITHSUNDEEP
jqueryhtml
user5626618
user5626618

Reputation:

Jquery fade one id at a time

I am new to Jquery and I am developing some online tutorials. In each tutorial, I want each stage to fade in one at a time when you click the next button and then when you have shown the last stage the next button should hide and a new next button, when clicked, should take you to the next tutorial. I am using ids to assign paragraphs in my HTML. As I am doing lots of tutorials with different numbers of steps in each, I would like to easily change this code according to the number of steps in each tutorial. I have tried to code this, and, although my code does what I want it to, it is very messy and long and I think there must 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 only want to use HTML and Javascript

Upvotes: 5

Views: 115

Answers (2)

George Dewar
George Dewar

Reputation: 103

There are a number of ways you could achieve this with jQuery, mainly depending on how "magical" you want to be.

One fairly simple strategy would be to have a global variable called stepNumber, and a data attribute on your steps, like so:

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 of the structure of your steps - they don't even have to be in the right order. Your step IDs are not required in this approach.

However,

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 to the number of steps to see if we should display the Next Tutorial button again.

As with the first approach, the step IDs 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've given the steps a common CSS class so that they can be easily identified in the Javascript.

Upvotes: 1

BenG
BenG

Reputation: 15154

You could look up the id using [id^="text"] which looks for ids starting with text. and use :hidden to check if anymore need fading in. if there is then fade in :first, else fade in the next tutorial.

$('#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>

Upvotes: 1

Related Questions