execute slideDown with if esle

Question

I have a form consisting of 2 parts, both on the same page.

I want a <p> element to be part two of the form. The <p> needs to be invisible and only shown when the first part of the form has been filled in. So when you fill in the form and click next, the <p> slides down and shows the rest of the form

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideUp();
  });
  $(".btn2").click(function(){
    $("p").slideDown();
  });
});

Answer 1

Based on the info you have provided i think you are looking for this :-

HTML:-

<input type="button" id="btn1" value="Prev">
<input type="button" id="btn2" value="Next">
<div>welcome to mypage
    fill all the fields :- Form 1</div>
<p style="display:none">
    Now Fill this section :- Form 2
</p>

JS:-

$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").slideUp();
  });
  $("#btn2").click(function(){
    $("p").slideDown();
  });
});

SEE THE DEMO

Answer 2

put both part in two div with id's and set style display none for second div.

style="display:none"

and then use this.

$(document).ready(function(){
  $(".btn1").click(function(){
    $("div2").show();
    $("div1").hide().slideUp();
  });
  $(".btn2").click(function(){
    $("div1").show();
    $("div2").hide().slideDown();
  });
});