0

how i want to jump from first page to third if the <p></p> on second page is empty? Or if is it empti on third then jump to fourth.

$(".lr1").click(function() {
  $(".p1").slideUp("fast");
  $(".p2").slideDown("fast");
});
$(".lr2").click(function() {
  $(".p2").slideUp("fast");
  $(".p3").slideDown("fast");
});
$(".lr3").click(function() {
  $(".p3").slideUp("fast");
  $(".p4").slideDown("fast");
});
.parent {
  width: 200px;
  height: 100px;
  background: #ccc;
  text-align: center;
}
.p2,
.p3,
.p4 {
  display: none;
}
.radio {
  margin-top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent p1">
  <h3>Page1</h3>
  <p>
    some Text here.
  </p>
  <div class="radio">
    <input id="r1" type="radio">
    <label class="label lr1" for="r1">Next to Page2</label>
  </div>
</div>
<div class="parent p2">
  <h3>Page2</h3>
  <div class="radio">
    <input id="r2" type="radio">
    <label class="label lr2" for="r2">Next to Page3</label>
  </div>
</div>
<div class="parent p3">
  <h3>Page3</h3>
  <p>
    some Text here.
  </p>
  <div class="radio">
    <input id="r3" type="radio">
    <label class="label lr3" for="r3">Next to Page4</label>
  </div>
</div>
<div class="parent p4">
  <h3>Page4</h3>
  <p>
    some Text here.
  </p>
  <div class="radio">
    <input id="r4" type="radio">
    <label class="label lr4" for="r4">Done</label>
  </div>
</div>
Barmar
  • 741,623
  • 53
  • 500
  • 612
Jake Brasch
  • 17
  • 2

1 Answers1

0

You can check if an element is empty by using its length: if its length is 0, then it doesn't exist. The code to modify the first page to jump to the third if the second is empty is here:

$(".lr1").click(function(){
    if ($(".p2 p").text().trim().length()){
        $(".p1").slideUp("fast");
        $(".p3").slideDown("fast");
    }else{
        $(".p1").slideUp("fast");
        $(".p2").slideDown("fast");
    }
});

https://jsfiddle.net/ayhpe561/.

Reference: another answer.

Nomce
  • 738
  • 1
  • 6
  • 18