Sunday, September 24, 2017

jQuery show, hide and toggle with effect




Name:

Age:

Sex:


The code:
<button onclick="toggle_display()">Show the input fields</button>
<br />
<br />
<br />
<div id="something">
  Name:<br />
  <input type="text" /><br />
  Age:<br />
  <input type="text" /><br />
  Sex:<br />
  <input type="text" /><br />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
   function toggle_display(){
       $("#something").toggle( "slow" );
       //or you can use codes like these:
       //$("#something").show( "slow" );
       //$("#something").hide( "slow" );
   }
</script>