如何滑动内容？

Question

我有以下代码：

$(".step-button").bind("click", function() {
  var step = $(this).attr("data-target-class");
  $(".step").removeClass("active");
  $("." + step).addClass("active");
});

.step {
  opacity: 0;
  height: 0;
}

.active {
  height: auto;
  transition: opacity 2s linear;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="step step1 active">
  <p>Hello World</p>
  <button class="step-button btn-primary" data-target-class="step2">Next</button>
</div>
<div class="step step2">
  <p>Hello World 2</p>
  <button class="step-button btn-primary" data-target-class="step3">Next</button>
</div>
<div class="step step3">
  <p>Hello World 3</p>
  <button class="step-button btn-primary " data-target-class="step4">Submit</button>
</div>
<div class="step step4">
  <p>Thank you</p>
  <button class="step-button btn-primary " data-target-class="step1">start 
    again</button>
</div>

所以我有3个不同的段落，带有下一步按钮。我一次只能看到一个。单击下一个后，第二个段落和按钮应该滑入，最后一个最后一个。

有人可以帮忙吗？预先感谢。

编辑：所以我已经做到了这一点，如果需要将来参考，请留给其他人。