jasonleonhard/gist:db7b3e00432e99ea107c

## gistfile1.html
<!doctype html>
<html>
<head>
	<title>Tabbed Form</title>

  <style type="text/css">
    /*-----------------CSS-------------------*/
    body {
      width: 500px;
      margin: auto;
      text-align: center;
    }

    li {
      list-style:none;
    }

    li.fields {
      margin: 0;
      padding: 1em 0;
    }

    li.title {
      cursor: pointer;
      font-weight: bold;
      font-size : 1.5em;
      line-height: 2em;
      background: #e3e3e3;
      border-bottom: 1px solid #c5c5c5;
      border-top: 1px solid white;
    }

    .hide { display: none;}

  </style>
</head>

<body>

  <!doctype html>
  <html>
  <head>
   <title>Tabbed Form</title>
   <!-- commented out bc I just went ahead and combined all the documents into one
   <script src="js/jquery.js" type="text/javascript"></script>
   <script src="js/animation.js" type="text/javascript"></script>
   <script src="js/validation.js" type="text/javascript"></script>
   <link rel="stylesheet" href="css/style.css" type="text/css" /> -->
   <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
 </head>

 <body>
  <form name="myform" onsubmit="return validateForm()">
    <ul>
     <li class="title">Who Are You?</li>
     <li class="fields">
      <label>*First Name:</label><br />
      <input id="first_name" class="req" type="text" /><br />
      <label>Middle Name:</label><br />
      <input id="middle_name" type="text" /><br />
      <label>Last Name:</label><br />
      <input id="last_name" type="text" /><br />
      <label>*Email:</label><br />
      <input id="email" class="req" type="text" /><br />
    </li>
    <li class="title">Where Are You?</li>
    <li class="fields">
      <label>City:</label><br />
      <input id="city" type="text" /><br />
      <label>*State:</label><br />
      <input id="state" class="req" type="text" /><br />
      <label>Country:</label><br />
      <input id="country" type="text" /><br />
    </li>
    <li class="title">What Do You Do?</li>
    <li class="fields">
      <label>
        *Occupation:</label><br />
        <input id="occupation" class="req" type="text" /><br />
        <label>Company:</label><br />
        <input id="company" type="text" /><br />
        <label>Company Location:</label><br />
        <input id="location" type="text" /><br />
      </li>
    </ul>
    <input type="submit" value="Submit Form" />
  </form>

  <script type="text/javascript">


//-----------------ANIMATION.JS-------------------
$(document).ready(function(){
  $('li.fields').filter(':nth-child(n+4)').addClass('hide');

  $('ul').on('click', 'li.title', function() {
    $(this)
    .next()
    .slideDown(200)
    .siblings('li.fields')
    .slideUp(200);
  });
});


//-----------------VALIDATION.JS-------------------
function validateForm(){
  /* Loop through fields with the class of "req" */
  for (var i = 0; i < myform.elements.length; i++) {
    if (myform.elements[i].className == "req" && myform.elements[i].value.length == 0) {
      alert('Please fill in all required fields');
      return false;
    }
  }

  /* Make sure the email value is a valid email address */
  var email  = document.getElementById('email').value;
  var atpos  = email.indexOf("@");
  var dotpos = email.lastIndexOf(".");
  if (atpos < 1 || dotpos < atpos+2 || dotpos+2 >= x.length){
    alert('Please use a valid email address');
    return false;
  }
}
</script>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Tabbed Form</title>

	<style type="text/css">
	/-----------------CSS-------------------/
	body {
	width: 500px;
	margin: auto;
	text-align: center;
	}

	li {
	list-style:none;
	}

	li.fields {
	margin: 0;
	padding: 1em 0;
	}

	li.title {
	cursor: pointer;
	font-weight: bold;
	font-size : 1.5em;
	line-height: 2em;
	background: #e3e3e3;
	border-bottom: 1px solid #c5c5c5;
	border-top: 1px solid white;
	}

	.hide { display: none;}

	</style>
	</head>

	<body>

	<!doctype html>
	<html>
	<head>
	<title>Tabbed Form</title>
	<!-- commented out bc I just went ahead and combined all the documents into one
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/animation.js" type="text/javascript"></script>
	<script src="js/validation.js" type="text/javascript"></script>
	<link rel="stylesheet" href="css/style.css" type="text/css" /> -->
	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
	</head>

	<body>
	<form name="myform" onsubmit="return validateForm()">
	<ul>
	<li class="title">Who Are You?</li>
	<li class="fields">
	<label>*First Name:</label><br />
	<input id="first_name" class="req" type="text" /><br />
	<label>Middle Name:</label><br />
	<input id="middle_name" type="text" /><br />
	<label>Last Name:</label><br />
	<input id="last_name" type="text" /><br />
	<label>*Email:</label><br />
	<input id="email" class="req" type="text" /><br />
	</li>
	<li class="title">Where Are You?</li>
	<li class="fields">
	<label>City:</label><br />
	<input id="city" type="text" /><br />
	<label>*State:</label><br />
	<input id="state" class="req" type="text" /><br />
	<label>Country:</label><br />
	<input id="country" type="text" /><br />
	</li>
	<li class="title">What Do You Do?</li>
	<li class="fields">
	<label>
	*Occupation:</label><br />
	<input id="occupation" class="req" type="text" /><br />
	<label>Company:</label><br />
	<input id="company" type="text" /><br />
	<label>Company Location:</label><br />
	<input id="location" type="text" /><br />
	</li>
	</ul>
	<input type="submit" value="Submit Form" />
	</form>

	<script type="text/javascript">


	//-----------------ANIMATION.JS-------------------
	$(document).ready(function(){
	$('li.fields').filter(':nth-child(n+4)').addClass('hide');

	$('ul').on('click', 'li.title', function() {
	$(this)
	.next()
	.slideDown(200)
	.siblings('li.fields')
	.slideUp(200);
	});
	});


	//-----------------VALIDATION.JS-------------------
	function validateForm(){
	/* Loop through fields with the class of "req" */
	for (var i = 0; i < myform.elements.length; i++) {
	if (myform.elements[i].className == "req" && myform.elements[i].value.length == 0) {
	alert('Please fill in all required fields');
	return false;
	}
	}

	/* Make sure the email value is a valid email address */
	var email = document.getElementById('email').value;
	var atpos = email.indexOf("@");
	var dotpos = email.lastIndexOf(".");
	if (atpos < 1 \|\| dotpos < atpos+2 \|\| dotpos+2 >= x.length){
	alert('Please use a valid email address');
	return false;
	}
	}
	</script>

	</body>
	</html>