javascript - Showing a div if all inputs are filled in -

i stuck trying figure out how show div after checking see if inputs have been filled in. wanting inputs within #intro-info section checked. not sure write in else statement make button #intro-button display if of inputs have been filled in.

here fiddle if helps

$(function () {         var intro = $('.intro');        intro.on('keypress', function() {          if ($(this).val().length > 1) {              $(this).next('.intro').addclass('block');          }                  /* else {              $('.intro').hide();          }*/      });      var allempty = true;        $('#intro-info :input').each(function() {          if ($(this).val() !== '') {              allempty = false;              return false; // we've found non-empty one, stop iterating          } else      });       return allempty;  });

.intro {    opacity: 0;    padding: 10px 15px;    margin: 20px auto;  }    .intro:first-child {    display: block;    opacity: 1;  }  .block {    display: block;    opacity: 1;     -webkit-animation: fadein 1s ease-in;     -moz-animation: fadein 1s ease-in;      animation: fadein 1s ease-in;  }  .next {    display: none;  }  #intro-button {  	display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="intro-info">    <input id="name" type="text" class="intro">    <input id="email" type="email" class="intro">    <input id="title" type="text" class="intro">    <button id="intro-button">proceed</button>  </div>        <a class="next">show div</a>

you can use jquery's toggle() method set visibility of element. can grab input text fields, check lengths, , pass result function.

for example:

$('.next').toggle($('#name').val().length > 0); 

will set visibility of next div depending on whether or not has been entered in name field.